Jquery Mobile 1.2RC-1加載消息不顯示

Question

我試圖在初始應用程序/站點初始化期間以及每次用戶返回到#index頁面時顯示JQM 1.2 RC-1加載消息。我對如何做到這一點的理解如下，然而，它不像我預期的那樣工作。這不顯示加載消息。

$('body').on('pagebeforeshow', '#index', function(){ 

    $.mobile.loading('show') 

    $('#index ul li').remove() 

    var post_data = { 
     action: 'an_action', 
     method: 'method' 
    } 

    $.ajax({ 
     type: 'POST', 
     url: ajaxurl, 
     data: post_data, 
     cache: false, 
     dataType: 'text', 
     cache: false, 
     success: function(response) { 

      $('#index ul').append(response) 

      $('#index ul').listview('refresh') 

      $.mobile.loading('hide') 

     }, 
     error: function(jqXHR, textStatus, errorThrown) { 

      console.log(' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown) 

     } 
    }) 


}) 

我在這裏找到的解決方法（stackoverflow）用於顯示加載時的加載消息。

$('#index').live('pageshow', function(event) { //Workaround to show page loading on initial page load 

    $.mobile.loading('show') 

}) 

我遇到的問題是，當我瀏覽回#INDEX和加載消息是有時刪除，它仍然其他時間。

如果加載消息處於活動狀態，並且我單擊一個鏈接離開當前頁面，則會按預期方式刪除加載消息。當我從同一個鏈接返回到#index時，加載消息有時會被刪除，而不刷新瀏覽器中的頁面。

是否有另一種方法來實現加載消息初始應用程序/網站負載？

附加信息：

測試上運行的Safari 6的iOS和Chrome，Mac OSX版的Chrome，Safari瀏覽器，火狐，歌劇有相同的結果的iDevice。

jQuery Mobile的1.2 RC-1

我使用單頁模板和服務器數據注入列表，然後過渡到不同的頁面＃標識的。

我嘗試沒有成功：

$('#index').live('pageinit', function(event) { 

    $.mobile.loading('show') 

}) 

的$。阿賈克斯（）成功被觸發並完成了我可以改變服務器的數據，並在應用中持續改變。

由於$ .mobile.loading（'hide'）也應該被觸發並且隱藏加載消息，因爲響應是成功。這使我相信這不是一個緩存問題。

Answer 1

這就是我所做的，我在class =「my_style」中添加了一個div，它初始隱藏，並且當showpageloading消息顯示時，這兩個自定義函數顯示並隱藏它：

function showCustomPageLoadingMsg(){ 
    $('.my_style').css('display','inline'); 
} 

function hideCustomPageLoadingMsg(){ 
    $('.my_style').css('display','none'); 
} 

，這是我怎麼叫功能：$.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true);和$.mobile.hideCustomPageLoadingMsg();

我的代碼和你之間的另一個區別是，我把Ajax調用和被調用內部的功能。住：

function test(){ 
    $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); 

$('#index ul li').remove() 

var post_data = { 
    action: 'an_action', 
    method: 'method' 
    } 

$.ajax({ 
    type: 'POST', 
    url: ajaxurl, 
    data: post_data, 
    cache: false, 
    dataType: 'text', 
    cache: false, 
    success: function(response) { 
     $.mobile.hideCustomPageLoadingMsg(); 
     $('#index ul').append(response) 

     $('#index ul').listview('refresh') 



     }, 
    error: function(jqXHR, textStatus, errorThrown) { 

     console.log(' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown) 

     } 
    }) 

} 

$('#index').live('pageinit', function(event) { 

test(); 

}); 

循環孔在你的代碼：

1. 大量的代碼缺少在代碼;行的最後一個分號這是一個標準的分隔符
2. 你是隱藏的在您的成功函數中附加了html內容之後的消息。這應該在之前完成。
3. 最後嘗試使用函數式編程，以便您可以在不同情況下重用代碼，並且從長遠來看，如果您必須更改代碼，則只會在一個地方執行更改。
4. 另一件事是，使用函數式編程，您可以引入test（）可以採用的變量，並將它們替換爲測試的定義。

快樂黑客！