在 jQuery Mobile 中的 Ajax 调用中显示页面加载微调器

Question

我正在使用 $.ajax() 在我的移动网络应用程序中填充一个列表。我想做的是让 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

您可以使用$.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 2

在 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 3

一些人询问了我最终实施的解决方法，所以我想我会分享它。它没有什么特别优雅或复杂的，但它似乎确实有效。自从官方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.
        //
    });
});

Answer 4

这有点晚了……但你需要：

1. 在 AJAX 调用之前调用 $.mobile.showPageLoadingMsg()。
2. 进行 AJAX 调用。 调用需要异步发送（在你的调用中输入async: true）。
3. 在您的 success() 函数中添加 $.mobile.hidePageLoadingMsg()。

Answer 5

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

Answer 6

您应该在 ajax 调用之前执行 $.mobile.showPageLoadingMsg() 并在成功（或失败）块中执行 $.mobile.hidePageLoadingMsg() 以便一旦结果返回，它就会消失。

我从未使用过 jQuery mobile，但它的操作应该与显示/隐藏普通的旋转图像相同。

Answer 7

或者，最简单的方法是把它放在全局作为关注点分离 -

将以下代码放入您的主/布局视图中

   <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');

Answer 8

这里的问题是对 $.ajax() 的调用发生在事件处理程序（调用者）的控制流中。

将 ajax 请求与此控制流分离的一种非常简单的方法是让 setTimeout() 为您调用此函数，如下所示：

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

然后您可以如前所述使用 $.ajax() 的 'beforeSend' 和 'complete' 事件，并确保您的微调器正在显示。