JQueryMobile：帶有數據的頁面（來自ajax）不會改變

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的數據。

因此，從第一類的內容點擊遺體，即使你後來去了另一個類別。它將繼續顯示您第一次點擊的類別。

我在做什麼錯？

來源

2013-05-01 Wijnand de Ridder

添加'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

它工作時，我這樣做：

$page.page(); 
$page.trigger('create'); // added this one 
$content.find(":jqmData(role=listview)").listview(); 
$content.find(":jqmData(role=listview)").listview("refresh"); // added this one

來源

2013-05-08 09:07:56

JQueryMobile：帶有數據的頁面（來自ajax）不會改變

回答

相關問題