I have a list of items with which I would like to view more details of them when I click on it. The information for these items isn't available and I need to make an API request in order to get the necessary data which I then render in a jquery template.
我有一个项目列表,当我点击它时,我想查看它们的更多细节。这些项目的信息不可用,我需要发出API请求以获取必要的数据,然后我在jquery模板中呈现这些数据。
The template is then added to a jquery mobile page.
然后将模板添加到jquery移动页面。
Here is some of the code in question that I am using to try and update my page
以下是我用来尝试更新页面的一些代码
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);
});
The following is the div I use for the product details as well as the template for which I use to populate that div
以下是我用于产品详细信息的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>
Here is a screenshot of a details page when I first click on an item:
这是我第一次点击某个项目时的详细信息页面的屏幕截图:
详情页工作
详细信息页面不起作用
1 个解决方案
#1
0
I think you need to tell the page to refresh itself the second time around. First time it creates everything and then doesn't go around re-styling itself. I had a similar issue dynamically creating LIs in a listview.
我想你需要告诉页面第二次刷新自己。它第一次创造了一切,然后不再重新塑造自己。我有一个类似的问题,在列表视图中动态创建LI。
Try:
productDetailsPage.page("refresh",true);
Not sure if this will work the first time around, but it should for the 2nd :)
不确定这是否会在第一次工作,但应该是第二次:)
#1
0
I think you need to tell the page to refresh itself the second time around. First time it creates everything and then doesn't go around re-styling itself. I had a similar issue dynamically creating LIs in a listview.
我想你需要告诉页面第二次刷新自己。它第一次创造了一切,然后不再重新塑造自己。我有一个类似的问题,在列表视图中动态创建LI。
Try:
productDetailsPage.page("refresh",true);
Not sure if this will work the first time around, but it should for the 2nd :)
不确定这是否会在第一次工作,但应该是第二次:)