jQuery mobile ajax not loading

Question

我必須在這裏錯過一件非常簡單的事情，因爲它看起來如此明顯......我無法相信我在網上找不到任何東西！

我正在嘗試使用jQuery移動庫來製作我的網站的移動視圖。

我的頁面中有三個頁面（數據角色）。兩個包含靜態內容，另一個包含我希望加載ajax的內容。首頁有鏈接到其他兩個頁面：

<div data-role="page" id="home"> 
    <div data-role="header" id="header"> 
     <h1>the header</h1> 
    </div> 
    <div data-role="content"> 
     <a href="http://absolutepathtomyserver/homepage#highlights" data-role="button">highlights</a> 
     <a href="http://absolutepathtomyserver/updatePlaylistTemplate#playlist" data-role="button" rel="external">playlist</a> 
    </div> 
</div> 

<div data-role="page" id="highlights"> 
    <div data-role="content"> 
     <p class="center">My static content</p> 
    </div> 
</div> 

<div data-role="page" id="playlist"> 
    <div data-role="content"><!-- TO BE FILLED FROM AJAX! --></div> 
</div> 

從我的很多教程我讀的理解，默認情況下所有的A HREF鏈接執行一個Ajax調用，除非另有規定，但它不工作。當我點擊突出顯示的鏈接時，頁面像預期的那樣滑動，而不會加載任何其他頁面，因爲它是相同的頁面。這裏一切都很好。但是當我點擊播放列表頁面時，會執行幻燈片動畫，但從不製作ajax調用，因此播放列表的內容永遠不會被填充。請注意，我監控網絡呼叫，但是在點擊鏈接時沒有任何信息。

我錯過了什麼？

這是我絕對的電話嗎？我對靜態內容使用標記基礎URL，因此鏈接在我的所有應用程序中都必須是絕對的。

我需要使用.bind方法嗎？

我是否需要手動進行ajax調用？我可以做到這一點，但從我看來，它似乎是移動擴張中的href鏈接原生...

Answer 1

選擇2與一點tweeking。我不知道爲什麼，但代碼中的回調函數似乎太快，因爲沒有填充內容，儘管內容是從後端獲取的。我可以在我的網絡檢查員看到這個電話。第二個選擇器中還缺少「'」。

這裏是工作代碼：

$('#playlist').bind('pageshow', function() { 
    $.ajax({ 
     url: 'updateplaylist.html', 
     success:function(data, textStatus, jqXHR){$('#playlist').find('[data-role="content"]').html(data);} 
    }); 
}); 

我仍然不知道爲什麼選項1沒有采取正確的網址。我也擔心手動執行我的ajax調用，我會跳過jquery移動框架的默認微調。本地它太快了，我仍然沒有看到它。

Answer 2

jQuery Mobile ajax-link處理適用於尚未在文檔中指定的僞網頁。如果您想從home僞頁面的鏈接中加載頁面，請從文檔中省略playlist僞頁面。 jQuery Mobile將轉到鏈接中指定的url，獲取data-role="page"元素中的所有內容，自動將其添加到dom，並轉換到新添加的頁面。

另一個途徑是通過調用Ajax時playlist頁面顯示像這樣來加載數據：

$('#playlist').bind('pageshow', function() { 
    $.get('url_to/get.php', function (data) { 
     $('#playlist').find('[data-role="content"]').html(data); 
    }); 
}); 

上面的例子每現在是時候重新加載的HTML中data-role="content"元件的playlist僞頁面內所示。您可以交替使用pagecreate或其他jQuery Mobile events之一。