jquery mobile - динамически создавать элементы формы

StackOverflow https://stackoverflow.com/questions/4039428

Вопрос

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

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

Это было полезно?

Решение

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

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

Другие советы

ОБНОВИТЬ

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

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

Как предложена кофеанна .page() это способ сделать работу JQM с любой частью HTML

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

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

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

через то JQuery Mobile Docs, 1.0.4a

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

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

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

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

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

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

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

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

Naugtur верно, вам нужно позвонить. Page () на любом элементе, который вы добавляете в DOM, то он хорошо работает:

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top