0
function returnQueryResultJson(url,callback) {
return $.ajax({
url: url,
type: "GET",
dataType: "json",
success: function(response) {
callback(response);
}
});
}
function showCategory(url,hash, options) {
var cat = hash.replace(/.*category=/, "");
if (cat == '#page1') {
cat = '';
}
var a = returnQueryResultJson('http://www.placetowebservice.nl/categories.php?category=' + cat,function(res) {
var
category = res,
pageSelector = hash.replace(/\?.*$/, ""),
$page = $(pageSelector),
$header = $page.children(":jqmData(role=header)"),
$content = $page.children(":jqmData(role=content)"),
markup = '<ul data-role="listview" data-theme="c" data-dividertheme="b">';
var cItems = category;
var headername = category.name;
var numItems = cItems.length;
if (cat == '') {
markup = '<ul data-role="listview" data-theme="c" data-dividertheme="b" style="min-height:100%;">';
}
for (var i=0;i<numItems;i++) {
markup += '<li><a href="#category-item?category=' + cItems[i].id + '" data-rel="close"><h3>' + cItems[i].title + '</h3><p>' + cItems[i].description + '</p></a></li>';
}
markup += "</ul>";
$header.find("h1").html(headername);
$content.html(markup);
$page.page();
$content.find(":jqmData(role=listview)").listview();
options.dataUrl = url;
options.changeHash = true;
options.reloadPage = true;
console.log($page);
$.mobile.changePage($page, options);
//}
});
}
$(document).bind("pagebeforechange", function(e,data) {
if (typeof data.toPage === "string") {
var
uz = $.mobile.path.parseUrl(data.toPage),
re = /^#category-item/,
re2 = /^#page1/
;
if (uz.hash.search(re) !== -1 || uz.hash.search(re2) !== -1) {
showCategory(uz.href,uz.hash,data.options);
e.preventDefault();
}
}
});
我已經得到了這段代碼,它的工作原理非常好(第一次)。我第一次加載頁面:JQueryMobile:帶有數據的頁面(來自ajax)不會改變
$(document).ready(function(){
$.mobile.changePage('index.html#page1',{ dataUrl: "index.html#page1?category=", transition: "fade" });
});
它的工作原理,它將頁面加載ajax數據id =「page1」。
然後我點擊一個鏈接(類別1),它顯示第二頁(id =「category-item」),並用正確的數據填充它(類別1:sub 1,category 1:sub 2) 。然後我回去,它再次顯示類別。
現在問題出現,當我點擊下一個類別(類別2)。當我到那個頁面時,它給出了來自ajax的正確數據(我使用console.log來檢查這個),但屏幕上的數據仍然是來自類別1的數據。
因此,從第一類的內容點擊遺體,即使你後來去了另一個類別。它將繼續顯示您第一次點擊的類別。
我在做什麼錯?
添加'refresh'這裏'$ content.find( 「:jqmData(角色=列表視圖)」)。列表視圖( '刷新')'..刪除' .ready()'它不適用於jquery mobile。使用JQM事件。 – Omar 2013-05-01 12:52:20
我工作時,我這樣做: $ page.trigger('create'); $「content.find(」:jqmData(role = listview)「)。listview(); $ content.find(「:jqmData(role = listview)」)。listview(「refresh」); 謝謝! – 2013-05-08 09:06:29