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

您可以使用beforeSend的{{1}}和complete个事件致电$.ajax和$.mobile.showPageLoadingMsg。看起来像这样：

$.mobile.hidePageLoadingMsg

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

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

在AJAX通话前拨打$.mobile.showPageLoadingMsg()。
进行AJAX通话。 呼叫需要异步发送（将async: true置于通话中）。
在$.mobile.hidePageLoadingMsg()功能中添加success()。

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（＆gt; 1.2），请改用：

$ mobile.loading（ '节目'）;
$ mobile.loading（ '隐藏'）;

Answer 8

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

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

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

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

在jQuery Mobile中显示页面加载Spinner on Ajax Call

8 个答案: