jQueryMobile и плагин datebox с динамическими полями - PullRequest
Новая
       34

jQueryMobile и плагин datebox с динамическими полями

1 голос
/ 20 декабря 2011

Использование финального выпуска JQueryMobile и плагина jquery.mobile.datebox.js. На событие PageShow я динамически добавляю ряд полей, некоторые из них являются полями даты / времени с использованием плагина datebox. Все работает отлично, за исключением небольших устройств и iPhone в частности (это также происходит с настольными браузерами, когда вы делаете их особенно узкими). Когда вы щелкаете по значку даты или времени, когда всплывает помощник, я могу выбрать дату / время, и оно уходит в поле, но затем поле дублируется вместе со всем остальным в.

Вот пример кода показа страницы. Он вызывает веб-сервис для получения данных json, которые определяют поля, которые должны быть добавлены в форму. Поля могут быть дата, радио или текст. Все работает нормально, кроме перерисовки полей даты / времени после всплывающего окна: 

$('#editthing').live('pageshow', function (e, info) {
    var listurl = "/editthingattribute";
    //Add a cache 'buster' parameter
    var date = new Date();
    listurl = listurl + '?p_uid=' + date.getTime();
    $.ajax({
        url: listurl + "&p_id=" + getUrlVar("p_id") + "&p_thingattribute=" + getUrlVar("p_thingattribute"),
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (data) {
            var form = $("#formcontent");
            form.html = "";
            //Add the fields defined in the results from the database call
            $.each(data.editthingfields, function (index, item) {
                //Set the global field type
                fieldType = item.fieldType;

                if (item.fieldtype == 'date') {
                    inputType = 'date';

                    //This messes up on narrow browsers
                    form.append('<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '_date">' + item.fieldlabel + ' (Date)</label>' + '<input name="' + item.fieldname + '_date" id="' + item.fieldname + '_date" ' + 'type="date" data-role="datebox" data-options=\'{"mode": "calbox", "dateFormat":"dd/mm/YYYY"}\' ' + 'value="' + item.fieldvalue.substring(0, 10) + '" />' + '</div>' + '<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '_time">' + item.fieldlabel + ' (Time)</label>' + '<input name="' + item.fieldname + '_time" id="' + item.fieldname + '_time" ' + 'type="date" data-role="datebox" data-options=\'{"mode": "timebox"}\' ' + 'value="' + item.fieldvalue.substring(11, 17) + '" />' + '</div>');
                } else if (item.fieldtype == 'radio') {
                    inputType = 'radio';
                    //Add a suitable set of radio buttons for the attribute being edited.
                    form.append('<div data-role="fieldcontain">' + '<fieldset data-role="controlgroup">' + '<legend>' + item.fieldlabel + '</legend>');
                    var optionsarray = item.fieldoptions.split(',');
                    for (var i = 0; i < optionsarray.length; i++) {
                        if (item.fieldvalue == optionsarray[i]) {
                            form.append('<input name="' + item.fieldname + '" id="' + optionsarray[i] + '" ' + 'type="' + item.fieldtype + '" value="' + optionsarray[i] + '" checked="checked" />');
                        } else {
                            form.append('<input name="' + item.fieldname + '" id="' + optionsarray[i] + '" ' + 'type="' + item.fieldtype + '" value="' + optionsarray[i] + '" />');
                        }
                        form.append('<label for="' + optionsarray[i] + '">' + optionsarray[i] + '</label>');
                    }
                    form.append('</fieldset>' + '</div>');
                } else {
                    inputType = 'text';
                    form.append('<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '">' + item.fieldlabel + '</label>' + '<input name="' + item.fieldname + '" id="' + item.fieldname + '" ' + 'type="' + item.fieldtype + '" value="' + item.fieldvalue + '" />' + '</div>');
                }
            });
            var thinghdr = $("#thingheader");
            thinghdr.html = "";
            $(data.thingdetails).each(function (index) {
                thinghdr.append("<h3>" + this.thingoper + " " + this.thingnumber + " " + this.thingdesc + "</h3>");
            });

            $("#editthing").page("destroy").page();
        }
    });
});

Полагаю, проблема в том, что поля добавляются динамически, но я не знаю, как их обойти.

спасибо заранее Mike

1 Ответ

0 голосов
/ 20 апреля 2012

Возможно, вы прошли мимо этого, но я обнаружил, что мобильный способ обновления элементов с помощью jQuery заключается в вызове create для них.Возможно, это поможет вам получить интересующее вас поведение, например page("destroy").page();

. После того, как я добавляю в действие свой динамический элемент, я вызываю триггер («create») для него следующим образом: 

$(".selector").append(elementToAppend).trigger("create");

Это со страницы мобильной документации jQuery здесь .

Улучшение новой разметки

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

Однако, если вы создаете новую разметку на стороне клиента или загружаете контент через Ajax и внедряете егона странице вы можете вызвать событие create для обработки автоинициализации всех плагинов, содержащихся в новой разметке.Это может быть запущено на любом элементе (даже на самом div страницы), избавляя вас от необходимости вручную инициализировать каждый плагин (кнопка просмотра списка, выбор и т. Д.).

Например, если блок разметки HTML (скажем, форма входа в систему) была загружена через Ajax, вызвать событие create, чтобы автоматически преобразовать все содержащиеся в нем виджеты (в данном случае входы и кнопки) в расширенные версии.Код для этого сценария будет выглядеть следующим образом:

$ (... новая разметка, содержащая виджеты ...) .appendTo (".ui-page") .trigger ("create");

...