顯示頁面加載Ajax調用jQuery Mobile中的調整器

Question

我正在使用$ .ajax（）來填充我的移動web應用程序中的列表。我想要做的是在調用正在執行時出現jQuery移動加載微調器，並在列表填充後消失。當前版本的JQM分別使用$.mobile.showPageLoadingMsg()和$.mobile.hidePageLoadingMsg()來顯示和隱藏加載微調器。我無法弄清楚在哪裏放置這些語句以獲得正確的結果。這看起來應該是一件相當簡單的事情，我只是無法找到任何有關這種確切情況的信息。

這裏的pagecreate函數內部的Ajax調用：

$('#main').live('pagecreate', function(event) { 
     $.ajax({ 
      url: //url 
      dataType: 'json', 
      headers: //headers 
      success: function(data) { 
       for(i = 0; i < data.length; i++) { 
        $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>'); 
        $('#course' + data[i].id).listview(); 
        for(j = 0; j < data[i].evaluatedUserIds.length; j++) { 
         $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>'); 
        } 
        $('#course' + data[i].id).listview('refresh'); 
       } 
       $('#courses').listview('refresh'); 
      } 
     }); 
    }); 

Answer 1

有人問我最終實施的解決方法，所以我想我會分享它。這不是特別優雅或複雜，但它似乎工作。自官方1.0發佈以來，我還沒有使用這個框架，所以在更新中可能已經解決了。從本質上講，我把電話$.mobile.showPageLoadingMsg()進入pageshow功能，但它包裹的，如果條款，只有觸發第一次頁面如圖：

var mainloaded = false; 

$('#main').live('pageshow', function(event) { //Workaround to show page loading on initial page load 
    if(!mainloaded) { 
    $.mobile.showPageLoadingMsg(); 
    } 
}); 

$('#main').live('pagecreate', function(event) { 
    $.ajax({ 
     url: //url 
     dataType: //datatype, 
     headers: //headers 
     success: function(data) { 
      // 
      //...loading stuff 
      // 
      $.mobile.hidePageLoadingMsg(); 
      mainloaded = true; 
     } 
     // 
     //...handle error, etc. 
     // 
    }); 
}); 

Answer 2

你應該做$ .mobile.showPageLoadingMsg（）就在AJAX調用之前和$ .mobile.hidePageLoadingMsg（）在成功（或失敗）阻止，一旦結果回來，它就會消失。

我從來沒有使用jQuery手機，但它應該像顯示/隱藏普通的ol旋轉圖像一樣操作。

Answer 3

您可以使用$.ajax的beforeSend和complete事件來調用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg。應該是這樣的：

$('#main').live('pagecreate', function(event) { 
     $.ajax({ 
      beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner 
      complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner 
      url: //url 
      dataType: 'json', 
      headers: //headers 
      success: function(data) { 
       //... 
      } 
     }); 
    }); 

Answer 4

這是有點晚了......但你需要：

1. 呼叫$.mobile.showPageLoadingMsg() AJAX調用之前。
2. 進行AJAX調用。 該通話需要異步發送（在您的通話中加上async: true）。
3. 將$.mobile.hidePageLoadingMsg()加入您的success()函數中。

Answer 5

這裏的問題是，調用$阿賈克斯（）發生在事件處理程序（調用者）的控制流中。

一個非常簡單的方法來分離從這一控制流程Ajax請求是讓的setTimeout（）調用此功能對你來說，就像這樣：

setTimeout(function(){$.ajax(...)}, 1); 

然後，您可以使用「beforeSend」和「完整'之前所述的$ .ajax（）事件，並確保你的微調器正在顯示。

Answer 6

JQM 1.2之前：

$(document).ajaxStart(function() { 
    $.mobile.showPageLoadingMsg(); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.hidePageLoadingMsg(); 
}); 

由於JQM 1。2：

$(document).ajaxStart(function() { 
    $.mobile.loading('show'); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.loading('hide'); 
}); 

http://api.jquerymobile.com/page-loading/

Answer 7

$(document).ajaxSend(function() { 
    $.mobile.loading('show'); 
}); 
$(document).ajaxComplete(function() { 
    $.mobile.loading('hide'); 
}); 

Answer 8

或者，最簡單的方法就是把它全球的關注的分離 -

把下面的代碼到你的主/佈局視圖

<script type="text/javascript"> 

    $(document).bind('mobileinit', function() { 
     //Loader settings 
     $.mobile.loader.prototype.options.text = "Loading.."; 
     $.mobile.loader.prototype.options.textVisible = true; 
     $.mobile.loader.prototype.options.theme = "b"; 
     $.mobile.loader.prototype.options.textonly = false; 
    }); 

    $(document).on({ 
     ajaxSend: function() { $.mobile.showPageLoadingMsg(); }, 
     ajaxStart: function() { $.mobile.showPageLoadingMsg(); }, 
     ajaxStop: function() { $.mobile.hidePageLoadingMsg(); }, 
     ajaxError: function() { $.mobile.hidePageLoadingMsg(); } 
    }); 

</script> 

編輯：請使用，而不是如果你是針對最新版本的JQM（> 1.2）：

• $ .mobile.loading（'show'）;
• $ .mobile.loading（'hide'）;