jsTransform - Select Box Repopulation

When doing a select box using jqTransform, some people might want to receive the option items from a Ajax request and use the result as the new option items.

However, since the update in select's options will be automatically reflected to the jqTransform to respond, the updated option list seems not be able to be updated. In face, the updated is made, only to be hidden select box, but not to the jqTransform wrapper for select box.

Therefore, we need to revalidate the jqTransfromation on the dynamically updated select box.

I will modify the jquery.jqtransform.js, on the Select section:

original code is:

/***************************
Select 
***************************/ 
$.fn.jqTransSelect = function(){
 return this.each(function(index){
  var $select = $(this);

  if($select.hasClass('jqTransformHidden')) {return;}
  if($select.attr('multiple')) {return;}

  var oLabel  =  jqTransformGetLabel($select);
  /* First thing we do is Wrap it */
  var $wrapper = $select
   .addClass('jqTransformHidden')
   .wrap('<div class="jqTransformSelectWrapper"></div>')
   .parent()
   .css({zIndex: 10-index})
  ;
  ...
  ...

Modify code is:

/***************************
Select 
***************************/ 
$.fn.jqTransSelect = function(isRefreshOptionList){
 return this.each(function(index){
  var $select = $(this);

  if($select.hasClass('jqTransformHidden') && isRefreshOptionList !== true) {return;}
  if($select.attr('multiple')) {return;}

  var oLabel  =  jqTransformGetLabel($select);
  
  if (typeof isRefreshOptionList != 'undefined' && isRefreshOptionList === true){
   $parent = $select.parent();
   if ($parent.hasClass('jqTransformSelectWrapper')){
    $select.parent().children().not($select).each(function (){
     $(this).remove();
    });
    $select.removeClass('jqTransformHidden').unwrap($select.parent());
   }
  }
  
  /* First thing we do is Wrap it */
  var $wrapper = $select
   .addClass('jqTransformHidden')
   .wrap('<div class="jqTransformSelectWrapper"></div>')
   .parent()
   .css({zIndex: 10-index})
  ;
  ...
  ...

isRefreshOptionList parameter becomes a optional variable that controlling a select box to be revalidated.
After your Ajax request and put the new option list into the select box. You can call:

$('#select-box-id').jqTransSelect(true);

to repopulate the option list.

Javascript - console undefined

Console is not implemented in old browsers, e.g. IE 8 or below. So if your code contains console.xxx() , it gives error and terminates in your script.

Therefore, to give support of cross-browsers to your webpage, you can include a global javascript file which will probably being included in most of the html files. And put the following code to it.

/** for browsers does not have console to avoid error -- strat **/
if (!window.console && !console){
 var console = new MyConsole();
}

function MyConsole(){
 this.log = function log(str){}
}
/** for browsers does not have console -- end **/

Console in different browsers might have different functions, here is some general functions. You might add all to the MyConsole class.

"log", "info", "warn", "error", "debug", "trace"

There are several solutions to support console in the internet, you might check them out also.

jqTransform - Problem(1) - Events

In this article, I will first give a HTML for demonstrating the jqTransform on a simple form with input elements including textfield, radio button , checkbox and button.
I also attach labels for those input elements, since jqTransform plugin also implement the label as what in html native label does.

For the select box, it is the most complicated part in jqTransform and it will be scheduled to be improved at the last stage.

For this stage, I focus on the event handled in jqTransfrom because this part is not fully implemented in the original source code.

Here is a testing HTML file to test the events(foucs , click , change and blur) handled in input elements (textfield, radio button , checkbox and button):

Test Demo

jqTransform - Introduction

jQuery plugin - jqTransform

Introduction

jqTransform is a jQuery plugin created by DFC Engineering which can beautify form input elements.

Visit author website http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ to have a first glance of the demo of this plugin, and the github here https://github.com/jcamenisch/jqTransform. 

However, sadly, according to the github, this jqTransform project has been abandoned. The highlighted point is 

Also, most of us have used it only for styling of select elements, and paid no attention at all to the rest of the code.

jqTransform is under GPL License which means we developers can modify jqTransform and use it freely.

Programming Principal 

The principal of jqTransform is easy enough to understand and the source code are clean and readable. 

For a certain element going to be styling by jqTransform, the plugin add a wrapper surrounding the input element and let the wrapper apply CSS with pre-written in .css file.

When it comes to CSS styling, it concerns about cross-browser problem in which most of the CSS problem is done by the author.

Javascript - parseInt

If using latest version of browser can see parseInt("012345") giving number 12345 as output.
However, in some old browser, e.g. IE 8 , if the string parameter starts with a "0", it uses octal radix(8) to convert the string.
In IE 8, parseInt("012345") gives number 5349 as output, where it uses 8 as radix instead.

Javascript - Array functions

var fruits = [ "apple" , "orange" , "lemon" , "berry"];
var fruits = new Array( "apple" , "orange" , "lemon" , "berry");

Both array instantiations are the same and correct, in which new Array(...) is a more formal way to do that.
Since Javascript is lose type language, it does not care the data type inside the array. Or even you could have a mixed data type with integer and string inside an array.

Javascript - String functions

String.substr() VS String.substring() String.substr(start,length) is different from String.substring(start,end).
The second parameter length in substr() specify the number of character to be extracted,
whereas the second parameter end in substring() specify the index of ending character in the string.
Do not mess these two up. And pay attendion to the effect of negative number as second parameter giving to these functions.