jqTransform Select - Обновление Ajax? - PullRequest
Новая
       6

jqTransform Select - Обновление Ajax?

5 голосов
/ 17 января 2012

Я использую плагин jqTransform для стилизации элементов формы, что привело к небольшой проблеме с моими полями выбора. Похоже, поле выбора скрыто и заменено пользовательским DIV, содержащим список и т. Д.

Мне удалось получить плагин, запускающий событие нажатия кнопки select, когда что-то выбрано из списка, но у меня возникли небольшие проблемы с обновлением визуального списка - похоже, плагин не поддерживает обновление ajax из коробка.

Кто-нибудь имеет опыт выполнения обновлений ajax для селекторов, преобразованных jqTransform?

Преобразованный выбор выглядит примерно так: 

<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>

Плагин не преобразует уже преобразованный выбор (вы можете принудительно сделать это, удалив класс jqTransformHidden, но это просто дублирует видимый выбор).

Интересно, есть ли какой-нибудь умный jquery, который я мог бы использовать, чтобы вернуть select в его прежнее состояние и затем снова выполнить преобразование?

Спасибо

Пол

Ответы [ 2 ]

16 голосов
/ 22 февраля 2012

следующие сделали это для меня: 

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');
0 голосов
/ 03 февраля 2012

Запуск события on change может быть легко вызван применением этого исправления:

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

Для обновления у меня была такая же проблема. Я исправил это с помощью дополнительной функции, которую я вызываю после обновления исходного выбора.

Это выглядит примерно так: 

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

После того, как вы обновили выбранные параметры, просто запустите следующий код: 

fix_select('select#my_updated_select_box');

Возможно, это не самое красивое решение, но оно прекрасно работает для меня.

...