在 jQuery Mobile 中的 Ajax 调用中显示页面加载微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7208609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Page Loading Spinner on Ajax Call in jQuery Mobile
提问by Sean
I'm using $.ajax() to populate a list in my mobile web app. What I'd like to do is have the jQuery mobile loading spinner appears while this call is being performed and disappear once the list populates. The current version of JQM uses $.mobile.showPageLoadingMsg()and $.mobile.hidePageLoadingMsg()to show and hide the loading spinner, respectively. I can't figure out where exactly to place these statements to get the correct result. This seems like it should be a fairly easy thing to accomplish, I just haven't been able to find anything about this exact scenario.
我正在使用 $.ajax() 在我的移动网络应用程序中填充一个列表。我想要做的是在执行此调用时显示 jQuery 移动加载微调器，并在列表填充后消失。JQM 的当前版本使用$.mobile.showPageLoadingMsg()和$.mobile.hidePageLoadingMsg()分别显示和隐藏加载微调器。我无法弄清楚将这些语句放在哪里才能得到正确的结果。这似乎应该是一件相当容易完成的事情，我只是无法找到有关这种确切情况的任何信息。
Here's the ajax call inside the pagecreate function:
这是 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');
}
});
});
采纳答案by Sean
A few people have asked about the workaround I ended up implementing, so I figured I'd share it. It's nothing particularly elegant or complicated, but it did seem to work. I haven't used the framework since the official 1.0 was released, so this may have been solved in the update. Essentially, I put the $.mobile.showPageLoadingMsg()call into the pageshowfunction, but wrapped it in an if clause that only fires the first time the page is shown:
一些人询问了我最终实施的解决方法，所以我想我会分享它。它没有什么特别优雅或复杂的，但它似乎确实有效。自从1.0正式发布后，我就没有使用过框架，所以可能在更新中解决了这个问题。本质上，我将$.mobile.showPageLoadingMsg()调用放入pageshow函数中，但将其包装在一个 if 子句中，该子句仅在第一次显示页面时触发：
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.
//
});
});
回答by Alex Turpin
You can use the beforeSendand completeevents of $.ajaxto call $.mobile.showPageLoadingMsgand $.mobile.hidePageLoadingMsg. Would look like this:
您可以使用beforeSend和complete事件$.ajax来调用$.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) {
//...
}
});
});
回答by Marvin Emil Brach
Before JQM 1.2:
在 JQM 1.2 之前：
$(document).ajaxStart(function() {
$.mobile.showPageLoadingMsg();
});
$(document).ajaxStop(function() {
$.mobile.hidePageLoadingMsg();
});
Since JQM 1.2:
从 JQM 1.2 开始：
$(document).ajaxStart(function() {
$.mobile.loading('show');
});
$(document).ajaxStop(function() {
$.mobile.loading('hide');
});
回答by Ben
This is a bit late...but you need to:
这有点晚了......但你需要：
- Call
$.mobile.showPageLoadingMsg()before the AJAX call. - Make the AJAX call. The call needs to be sent asynchronously(put
async: truein your call). - Add
$.mobile.hidePageLoadingMsg()in yoursuccess()function.
- 调用
$.mobile.showPageLoadingMsg()AJAX调用之前。 - 进行 AJAX 调用。调用需要异步发送（放入
async: true您的调用中）。 - 添加
$.mobile.hidePageLoadingMsg()您的success()功能。
回答by Patrioticcow
$(document).ajaxSend(function() {
$.mobile.loading( 'show');
});
$(document).ajaxComplete(function() {
$.mobile.loading( 'hide');
});
回答by sandeep talabathula
Or, the simplest way is to put it globally as a separation of concern -
或者，最简单的方法是将其全局作为关注点分离——
Put below code into your master/layout view
将以下代码放入您的主/布局视图
<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>
Edit: Please use instead if you are targeting latest version of JQM (>1.2):
编辑：如果您的目标是最新版本的 JQM (>1.2)，请改用：
- $.mobile.loading('show');
- $.mobile.loading('hide');
- $.mobile.loading('show');
- $.mobile.loading('隐藏');
回答by degenerate
You should do $.mobile.showPageLoadingMsg()just before the ajax call, and $.mobile.hidePageLoadingMsg()in the success (or fail) block so it goes away once a result comes back.
您应该在 ajax 调用之前执行$.mobile.showPageLoadingMsg()，并在成功（或失败）块中执行$.mobile.hidePageLoadingMsg()以便一旦结果返回它就会消失。
I've never used jQuery mobile, but it should operate the same as showing/hiding a regular ol' spinning image.
我从未使用过 jQuery mobile，但它的操作方式应该与显示/隐藏常规旋转图像相同。
回答by juleq
The problem here is that the call to $.ajax() happens within the control flow of the event handler (the caller).
这里的问题是对 $.ajax() 的调用发生在事件处理程序（调用者）的控制流中。
A very simple way to decouple the ajax request from this control flow is to let setTimeout() invoke this function for you, like so:
将 ajax 请求与此控制流分离的一种非常简单的方法是让 setTimeout() 为您调用此函数，如下所示：
setTimeout(function(){$.ajax( ... )}, 1);
You can then use the 'beforeSend' and 'complete' events of $.ajax() as stated before and be sure, that your spinner is showing up.
然后，您可以使用前面所述的 $.ajax() 的 'beforeSend' 和 'complete' 事件，并确保您的微调器出现了。
