2011-12-20 48 views
1

使用JQueryMobile final版本和jquery.mobile.datebox.js插件。在pageshow事件中,我將動態添加一系列字段,其中一些是使用datebox插件的日期/時間字段。除了較小的設備和iPhone外,一切都可以正常工作(當你使它們變得特別窄時,它也會發生在桌面瀏覽器上)。當你點擊日期或時間圖標助手彈出時,我可以選擇一個日期/時間,然後它將進入該字段,但該字段會與其他任何內容一起被複制。帶動態字段的jQueryMobile和datebox插件

下面是一個頁面顯示代碼的例子。它調用一個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(); 
     } 
    }); 
}); 

我猜問題是由於被動態添加的字段,但我不知道如何得到它周圍。提前 麥克

回答

0

感謝你可能已經轉移過去,但我發現,修改元素的jQuery Mobile的方法是調用創建它們。也許這將幫助你有你感興趣的page("destroy").page();

後,我附上我的動態元素intsead應運而生的行爲,我就調用它觸發(「創」)是這樣的:

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

這來自jQuery移動文檔頁面here

加強新的標記

頁面插件調度pageInit事件, 其中大部分部件使用自動初始化自己。只要引用了 小部件插件腳本,它就會自動增強它在頁面上找到的小部件的任何 實例。

但是,如果通過 的Ajax生成的內容的新標記的客戶端或負載,並將其注入到一個頁面,你可以觸發創建事件 處理自動初始化包含在 新的所有插件標記。這可以在任何元素上觸發(即使是div本身),爲您節省了手動初始化每個插件 (列表視圖按鈕,選擇等)的任務。

例如,如果HTML標記(比如登錄表單)的塊是在通過Ajax加載 ,觸發創建事件來自動變換 所有它包含(這種情況下的輸入和按鈕)的微件進入 增強版本。此場景的代碼是:

$(...包含小部件的新標記...).appendTo(「.ui-page」 ).trigger(「create」);