jQuery Mobile的頁面無法用數據填充

的Index.htmljQuery Mobile的頁面無法用數據填充

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head> 
<body> 

    <div data-role="page" id="reviewsPage"> 
     <div data-role="header"> 
      <h1>Reviews</h1> 
      <a href="twitter.html" id="twitterBtn" class="ui-btn-right" 
      >TWEET</a> 
     </div> 

    </div> 
    <script type="text/javascript"> 
     $(document).on("pageinit", "#reviewsPage", function(event) { 
      $("#twitterBtn").bind("click", function(e) { 
       $.mobile.showPageLoadingMsg(); 

       $.mobile.loadPage("twitter.html", { 
        reloadPage :false 
       }); 

      }); 
     }); 

    </script> 

</body>

上面顯示了加載twitter.html文件我的index.html文件。

twitter.html

<div data-role="page" id="twitterPage"> 

    <div data-role="content"> 
    <ul id="tweet-list" data-role="listview" data-inset="true"> 
     <li data-role="list-divider"> 
      <p> 
       Tweets 
      </p> 
     </li> 
    </ul> 
</div>

 <script type="text/javascript"> 
     $("#twitterPage").live("pagebeforecreate", function(){{ 
     alert("shdgs"); 
     $.ajax({ 
     url : " searchresult.php", 
     success : function(data) { 
      alert("dsds"); 
      var markup = ""; 
      $.each(data, function(i, elem) { 
       var $template = $('<div><li><img class="ui-li-icon profile"><p class="from"></p><p class="tweet"></p></li></div>'); 
       $template.find(".from").append(elem['a']); 
       //$template.find(".tweet").append(result.text); 
       //$template.find(".profile").attr("src", result.profile_image_url); 
       markup += $template.html(); 

      }); 
      $("#tweet-list").append(markup).listview("refresh", true); 

      $.mobile.changePage($("#twitterPage")); 
     }, 

     error : function(request, error) { 
      // This callback function will trigger on unsuccessful action 
      alert(error); 
     } 
    }); 

});

當指數HTML調用twitter.html文件。該屏幕將twiter.html被替換黑白文件，而不data.But如果我直接運行twitter.html，數據將被填充。

來源

2013-10-17 user2889058

請將'$（「#twitterPage」）.live（「pagebeforecreate」，function（）{{'with'$（document）.on（'pagebeforeshow'，'#twi tterPage'，函數（）{{ – SathishKumar

仍然不work.i在谷歌瀏覽器中試過 – user2889058

我認爲問題是你正在使用'href = twitter.html'來遷移到twitter頁面。按照JQM的要求，您並不是真的在改變頁面。因此'pagebeforecreate'沒有被調用。 –

保存HTML文件的body爲：

<div data-role="page" id="reviewsPage"> 
    <div data-role="header"> 
     <h1>Reviews</h1> 
     <a id="twitterBtn" class="ui-btn-right">TWEET</a> 
    </div> 
</div> 
<div data-role="page" id="twitterPage"> 
    <div data-role="content"> 
     <ul id="tweet-list" data-role="listview" data-inset="true"> 
      <li data-role="list-divider"> 
       <p>Tweets</p> 
      </li> 
     </ul> 
    </div> 
</div>

在javascipt的代碼更改loadPage到changePage（放在同一個文件兩個JS代碼）：

$("#twitterBtn").bind("click", function (e) { 
    $.mobile.showPageLoadingMsg(); 

    $.mobile.changePage("#twitterPage", { 
     reloadPage: false 
    }); 

});

看到這個工作版本：http://jsfiddle.net/NrCGb/272/

來源

2013-10-17 06:51:47

你的例子工作正常。但是當數據加載到下一頁，並顯示在列表視圖和disapper – user2889058

我不喜歡不明白你的意思。 –

你必須犯一些愚蠢的錯誤。我不知道爲什麼發生這種情況，取決於你的新代碼。不會發生在我的情況：http://jsfiddle.net/NrCGb/273/ –

jQuery Mobile的頁面無法用數據填充

回答

相關問題