1

JQueryMobileの最終リリースとjquery.mobile.datebox.jsプラグインを使用します。pageshowイベントで、一連のフィールドを動的に追加しています。これらの一部は、dateboxプラグインを使用した日付/時刻フィールドです。特に小型のデバイスとiPhoneを除いて、すべてが正常に機能します（特にデスクトップブラウザを狭くすると、デスクトップブラウザでも発生します）。ヘルパーがポップアップする日付または時刻のアイコンをクリックすると、日付/時刻を選択してフィールドに入力できますが、フィールドは他のものと一緒に複製されます。

ページ表示コードの例を次に示します。Webサービスを呼び出して、フォームに追加する必要のあるフィールドを定義した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();
        }
    });
});

問題はフィールドが動的に追加されていることが原因だと思いますが、それを回避する方法がわかりません。

事前に感謝マイク

4

1 に答える 1

0

これを過ぎてしまったかもしれませんが、要素を更新する jQuery モバイルの方法は、要素に対して create を呼び出すことであることがわかりました。おそらく、それはあなたが興味を持っている行動をするのに役立つでしょうpage("destroy").page();

動的要素を追加した後、次のように trigger("create") を呼び出します。

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

これは jQuery モバイルのドキュメント ページhereからのものです。

新しいマークアップの強化

ページ プラグインは、ほとんどのウィジェットが自身を自動初期化するために使用する pageInit イベントを送出します。ウィジェット プラグイン スクリプトが参照されている限り、ページ上で見つかったウィジェットのインスタンスが自動的に拡張されます。

ただし、新しいマークアップをクライアント側で生成するか、Ajax を介してコンテンツを読み込んでページに挿入する場合は、create イベントをトリガーして、新しいマークアップに含まれるすべてのプラグインの自動初期化を処理できます。これは任意の要素 (ページ div 自体も含む) でトリガーできるため、各プラグイン (リストビュー ボタン、選択など) を手動で初期化するタスクを節約できます。

たとえば、HTML マークアップのブロック (ログイン フォームなど) が Ajax を介して読み込まれた場合、create イベントをトリガーして、そこに含まれるすべてのウィジェット (この場合は入力とボタン) を拡張バージョンに自動的に変換します。このシナリオのコードは次のようになります。

$( ...ウィジェットを含む新しいマークアップ... ).appendTo( ".ui-page" ).trigger( "create" );

于 2012-04-20T14:34:38.653 に答える