jQuery Mobile - Динамическое создание элементов формы

Question

Я создаю автономное веб-приложение на основе веб-базы данных, ориентированное на устройства iOS.Я пытаюсь использовать jQuery Mobile, но у меня проблема с созданием различных форм.

Параметры формы берутся из запроса к базе данных, поэтому они вставляются на страницу после ее загрузки, поэтому«JQuery-Mobilification» не происходит.Быстро просматривая источник, кажется, нет никакого очевидного способа обратиться к этому на данном этапе (конечно, это альфа-релиз, и я думаю, что это будет довольно распространенный запрос, поэтому я надеюсь, что этопридет).Есть ли какое-то решение, которое я могу использовать для этого?Меня особенно интересуют переключатели, флажки и списки выбора.

Answer 1

UPDATE

Beta2 имеет событие create. Я обновлю свой FAQ, когда выйдет бета2. Смотри http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

Обновленный FAQ: http://jquerymobiledictionary.pl/faq.html

---

Как предложил CaffeineFueled - .page() - это способ заставить JQM работать с любой частью HTML

.page() может быть вызван только один раз для элемента. Назовите это на элемент обертки, который вы добавляете на страницу. Он должен справиться со всем.

Answer 2

Текущий выбранный ответ немного устарел. Используйте «обновление», а не «страницу», для стилизации динамически добавляемого содержимого (списков или форм).

Если вы добавите элементы в просмотр списка, вы необходимо вызвать метод refresh () это обновить стили и создать любой вложенные списки, которые добавляются. За Например, $('ul').listview('refresh');

через документы jQuery Mobile, 1.0.4a

Answer 3

Это недоработано в недокументированных внутренних органах, но у меня работает следующее:

$("#some-div").load("/html/fragment/", 
                    function() { 
                      $(this).find("input").customTextInput();  
                    });

Существуют эквивалентные методы для кнопок, флажков и т. Д.

Посмотрите на метод _enchanceControls [sic] в http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.

Обновление для 1.0Alpha2 : Как и следовало ожидать при игре с внутренними компонентами библиотеки, это больше не работает в последней версии. Изменение customTextInput() на textinput() исправляет это немного, но по некоторым причинам тема не применяется полностью. Нас предупредили ...

Answer 4

После завершения вызова AJAX и вставки элементов формы попробуйте вызвать:

$("#the-page-id").page();

Я полагаю, что команда jquery-mobile добавит метод .refresh () в различные элементы пользовательского интерфейса, чтобы решить эту проблемувыпуск в будущем.

Answer 5

Это сработало для меня (jquerymobile1.7.0):

$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>');  
$('#name').textinput();

В настоящее время существуют так называемые подключаемые функции для всех видов элементов формы (например, слайдер, ввод текста и т. Д.) Для их создания.

Answer 6

naugtur - это правильно, вы должны вызывать .page () для любого элемента, который вы добавляете в dom, тогда это прекрасно работает:

var el = $('<input type="text"/>')
el.page();
$('#something').append(el);

Answer 7

Да, проблема, как вы описали. «Мобилизация» запускается, когда документ готов. Но так как ваши автономные запросы к БД асинхронны, они заканчиваются после того, как document.ready запущен. Таким образом, DOM обновляется позже, и в него не добавляется дополнительный CSS для всех элементов div и списка.

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

Похоже, это единственный вариант на данный момент.

Традиционно я использовал jqtouch, а теперь sencha. Я мало играл с jQuery mobile.

АЛЬТЕРНАТИВНО - вы можете выписать свой HTML после запроса его из базы данных с необходимыми стилями CSS. Если вы используете плагин Firebug для Firefox, вы можете увидеть, какие стили / классы применяются при запуске мобилизации. Вы можете просто написать свой HTML, используя эти соглашения. Не идеально, но будет работать.

Answer 8

Вот ссылка на документы по этой функции, о которых говорил Том. Не уверен, когда именно они были добавлены, но я использую его, и он работает для меня!

http://jquerymobile.com/test/docs/forms/plugin-eventsmethods.html