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

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

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

Ответ 1

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

$("#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() исправляет его немного, но тема по какой-то причине не полностью применяется. Мы были предупреждены...

Ответ 2

UPDATE

Бета2 имеет событие create. Я обновлю свой вопрос, когда бета-версия будет выпущена. См. 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() можно вызвать только один раз для элемента. Вызовите его на элемент переноса, который вы добавляете на страницу. Он должен обрабатывать все.

Ответ 3

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

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

через jQuery Mobile docs, 1.0.4a

Ответ 4

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

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

Ответ 7

Это сработало для меня (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();

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

Ответ 8

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

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