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

Posted 2023-05-09

【中文标题】在 jQuery Mobile 中的 Ajax 调用中显示页面加载微调器

【英文标题】：Show Page Loading Spinner on Ajax Call in jQuery Mobile

【发布时间】：2011-11-04 17:38:34

【问题描述】：

我正在使用 $.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');
            
        );
    );

【参考方案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) 
                //...
            
        );
    );

【讨论】：

我一开始也试过这个，但它似乎也不起作用。 ajax 调用发生在 pagecreate 函数内部。会不会跟这有关系？

也试过了。没有这样的运气。我不确定发生了什么，也许是错误？最终，目前这没什么大不了的。

尝试用警报替换$.mobile.showPageLoadingMsg();。

$.mobile.showPageLoadingMsg() 不起作用或您的 JSON 请求太快以至于您看不到微调器出现。

它的工作。我猜这是正确的做法。谢谢 Xeon06。

【参考方案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/

【讨论】：

我正在使用 jQueryMobile 1.1 并实现了 $.mobile.showPageLoadingMsg();然后 $.mobile.hidePageLoadingMsg();但它只适用于 Firefox ......它在 chrome 或我的 safari 上没有任何作用......任何想法为什么？

控制台有输出吗？

这是一个绝妙的解决方案！防止编码（或可能忘记）在每次 AJAX 调用时显示微调器。

【参考方案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.
        //
    );
);

【讨论】：

您从 pagecreate 事件中移动节目是正确的，因为在此事件之后 JQM 调用 hidePageLoadingMsg，因为页面加载完成（这会覆盖您的调用）

【参考方案4】：

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

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

【讨论】：

是的，这基本上是其他人所说的，也是我尝试的第一件事。我得出的结论是，我使用的 beta 版本中存在一个错误，导致加载消息在初始页面加载时不显示。我最终找到了解决方法。无论如何，谢谢您的回复。

@Sean，我似乎遇到了与您描述的相同的问题。你能提供我你找到的解决方法吗？谢谢

如果您需要调用 async = false 会发生什么？

一直在寻找这个答案好几个小时！

【参考方案5】：

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

【参考方案6】：

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

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

【讨论】：

是的，这是我尝试的第一件事，但它似乎没有任何作用。我已经尝试省略 hide 调用以查看 show 调用是否有效（而不是太快离开而无法看到），但没有这样的运气。

【参考方案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');

【参考方案8】：

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

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

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

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