5

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 custom DIV containing a list, etc.

I've managed to get the plugin firing the select's click event when something is selected from the list, but I'm having a little trouble updating the visual list - it appears the plugin doesn't support ajax update out of the box.

Does anyone have experience of performing ajax updates on selects transformed by jqTransform?

Transformed select looks something like:

<div class="jqTransformSelectWrapper" style="z-index: 8; width: 63px; ">
<div>
<span style="width: 62px; ">Petrol</span><a href="#" class="jqTransformSelectOpen"></a>         </div>
<ul style="width: 63px; height: 24px; overflow-x: hidden; overflow-y: hidden; display: none; visibility: visible; ">
<li><a href="#" index="0" class="selected">Petrol</a></li></ul>
<select id="fuel_type_id" name="fuel_type[id]" class="jqTransformHidden" style=""><option value="1">Petrol</option></select>
</div>

The plugin won't transform an already transformed select (you can force it to by removing the jqTransformHidden class, but that just duplicates the visible select).

I wonder if there's some clever jquery I could use to return the select to it's former state and then perform the transform again?

Thanks,

Paul

Paul
  • 753
  • 5
  • 19
  • hi @Paul, I cant getting things that how can i use below code. I have two combos for country and state. After selecting the country state combo will poups with states in selected contry. I need to chat with you please help... – Bajrang May 16 '13 at 08:35

2 Answers2

16

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');
Teodor Todorov
  • 66
  • 1
  • 10
  • worked for me too, I just had to copy the .unwrap() function from the jQuery source, as I'm using an old version of jQuery – Diego Ponciano Apr 17 '12 at 14:37
  • hi @Teodor Todorov, I cant getting things that how can i use it. I have two combos for country and state. After selecting the country state combo will poups with states in selected contry. I need to chat with you please help... – Bajrang May 16 '13 at 08:21
0

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.

Bas van den Wijngaard
  • 29
  • 5