Choosing jqTransform - Ajax update?

Question

I use the jqTransform plugin to style form elements, which led to a little problem with my rectangles. It seems that the select box is hidden and replaced by a custom DIV containing a list, etc.

I managed to get the plugin to fire the click click event when something is selected from the list, but I have a little problem updating the visual list - it seems that the plugin does not support ajax updating from the box.

Does anyone have any experience doing ajax updates when choosing converted jqTransform?

The converted selection looks something like this:

<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 does not convert the already converted selection (you can force it to remove the jqTransformHidden class, but it just duplicates the visible selection).

I wonder if there is any smart jquery that I could use to return the previous state selected to it and then do the conversion again?

Thanks,

Floor

Answer 1

The 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'); 

Answer 2

Dismissing the on change event can be easily triggered by applying this fix:

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

I had the same problem for the update. I fixed this with an extra function that I call after updating the source file.

It looks something like this:

 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(); } 

Once you have updated your selections, simply enter the following code:

 fix_select('select#my_updated_select_box'); 

Perhaps this is not the most beautiful solution, but for me it is just wonderful.