用適當的jQuery Mobile風格持續更新頁面

我有一個項目列表，當我點擊它時，我想查看它們的更多細節。這些項目的信息不可用，我需要做一個API請求，以獲得必要的數據，然後我在jQuery模板中呈現。用適當的jQuery Mobile風格持續更新頁面

然後將該模板添加到jquery移動頁面。

下面是一些有問題的代碼，我使用的嘗試和更新我的網頁

function updateProductDetails(data){ 
    var productDetailsData = data['product'] 
    var productDetailsPage = $("#productDetails") 

    var templateData = $("#productDetailsTmpl").tmpl(productDetailsData); 

    productDetailsPage.html(templateData); 

    //ISSUE IS HERE -- The following works when I load a template 
    // for the first time, after that it doesn't work as expected. 
    productDetailsPage.page(); 

    $.mobile.changePage("#productDetails"); 
} 

function loadProductDetails(productId){ 
    $.mobile.pageLoading(); 
    $.ajax({ 
     url: '/admin/products/'+productId+".json", 
     success: function(data, status, xhr){ 
      updateProductDetails(data); 
      $.mobile.pageLoading(true); 
     }, 
     dataType: 'json' 
    }); 
} 

$("#productItem").live('click', function(event){ 
    var productId = $(this).children("#productId")[0].innerHTML; 
    loadProductDetails(productId); 
});

以下是我使用的產品的詳細信息，以及提供了模板，我使用到div填充該div

<div id="productDetails" data-role="page"> 
</div> 

<!-- Product Item Details Template --> 
<script id="productDetailsTmpl" type="text/x-jquery-tmpl"> 
    <div data-role="header"> 
     <h1>${title}</h1> 
    </div> 

    <div data-role="content"> 
     <h1>Properties</h1> 
     <p>${product_type}</p> 
     <p>${vendor}</p> 
    </div> 
</script>

下面是詳細信息頁面的截圖，當我第一次點擊一個項目：

Details page working

Details page not working

來源

2011-03-01 csaunders

我認爲你需要告訴頁面刷新圍繞自身的第二次。第一次它創造了一切，然後不去重新造型。我有一個類似的問題，在列表視圖中動態創建LI。

嘗試：

productDetailsPage.page("refresh",true);

不知道這是否會工作的第一次，但應爲第二:)

來源

2011-03-16 13:32:33 Richard

但這有時工作，但我發現得到它的方式一致工作就是調用listview（），這會讓jquery進入並將所有必要的樣式應用於它。 – csaunders 2011-03-16 13:47:52

是的，我其實也是在listview上做的，但我不確定你是否在listview之外創建了一些東西。 – Richard 2011-03-16 16:21:56

用適當的jQuery Mobile風格持續更新頁面

回答

相關問題