Ошибка при вызове функции refresh() в jQuery Mobile select
У меня проблемы с обновлением JQuery Mobile Select. По требованию я хочу изменить содержимое и обновить выбранное значение.
Вот скрипка (код ниже): http://jsfiddle.net/cjindustries/0cmg8vvt/2/
Я получаю эту ошибку в консоли (вместе с select, не обновляющимся): Uncaught Error: невозможно вызвать методы для selectmenu до инициализации; попытался вызвать метод "обновить"
Я видел подобные вещи здесь на SO, но ни один из найденных ответов не решил мою проблему. Мы используем jQueryMobile 1.3.1 и jQuery 1.9.1.
Любая помощь будет оценена:)
Спасибо, Крис.
Код...
<div data-role="page" id="p1">
<div data-role="content">
<h1>Page 1</h1>
<select class="pageSelect"></select>
<a href="#" id="update-select-1" data-role="button">Update Select Menu</a>
</div>
</div>
function generateOptions() {
var numbers = [],
html = "";
for (var i=0; i<100; i++) {
var v = Math.random();
numbers.push(v);
html = html + '<option value="' + v + '">' + v + '</option>';
};
return {
html: html,
value: numbers[5]
};
};
$(document).on('click', '#update-select-1', function() {
var options = generateOptions(),
select = $.mobile.activePage.find('.pageSelect');
select.html(options.html);
select.val(options.value);
// This updates the select but I lose styling
// select.selectmenu().selectmenu('refresh', true);
// This fails
select.selectmenu('refresh', true);
});
1 ответ
Не использовать .pageSelect
в качестве селектора, потому что jQM создаст дополнительный элемент с этим стилем. Когда вы делаете ´select = $.mobile.activePage.find('. PageSelect');
select.html(options.html);
select.val(options.value); '
Вы вставляете HTML-код в два элемента, объект select и визуализированный объект, и из-за этого вы теряете стилизацию.
Попробуй это:$.mobile.activePage.find('select[class=pageSelect]').html(options.html).select('refresh');
http://jsfiddle.net/cjindustries/0cmg8vvt/
Кроме того, если вы начинаете с jQM, рассмотрите возможность перехода на v1.4.