jqTransform Select - Ajax Update?

Question

I\'m using the jqTransform plugin to style my form elements, which has led to a slight problem with my select boxes. It appears the select box is hidden and replaced by a c

Answer 1

The firing of the on change event can be easily triggered by applying this fix:

http://www.polemus.net/2011/06/jqtransform-option-change-not-firing.html

For the updating I had the same problem. I fixed this with a extra function that I call after the original select gets updated.

It looks something like below:

function fix_select(selector) {
  selectedVal = $(selector).children(':selected').val();
  $(selector).children('option').removeAttr('selected');
  $(selector).children('option[value="'+selectedVal+'"]').attr('selected','selected');

  $(selector).removeClass('jqTransformHidden');
  $(selector).css('display','block');
  $(selector).prev('ul').remove();
  $(selector).prev('div.selectWrapper').remove();

  var selectElm = $(selector).closest('.jqTransformSelectWrapper').html();

  $(selector).closest('.jqTransformSelectWrapper').after(selectElm);
  $(selector).closest('.jqTransformSelectWrapper').remove();

  $(selector).closest('form').removeClass('jqtransformdone');
  $(selector).closest('form').jqTransform();
}

After you updated your select options, just trigger the following code:

fix_select('select#my_updated_select_box');

It maybe isn't the prettiest solution, but it works just wonderful for me.

Answer 2

following did it for me:

function fix_select(selector) {
    var i=$(selector).parent().find('div,ul').remove().css('zIndex');
    $(selector).unwrap().removeClass('jqTransformHidden').jqTransSelect();
    $(selector).parent().css('zIndex', i);
}
fix_select('select#my_updated_select_box');