在 jQuery Mobile 中的 Ajax 调用中显示页面加载微调器 [英] Show Page Loading Spinner on Ajax Call in jQuery Mobile

问题描述

我正在使用 $.ajax() 在我的移动网络应用程序中填充一个列表.我想要做的是在执行此调用时显示 jQuery 移动加载微调器，并在列表填充后消失.当前版本的 JQM 分别使用 $.mobile.showPageLoadingMsg() 和 $.mobile.hidePageLoadingMsg() 来显示和隐藏加载微调器.我无法弄清楚将这些语句放在哪里才能得到正确的结果.这似乎应该是一件相当容易完成的事情，我只是无法找到有关这种确切情况的任何信息.

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.

这是 pagecreate 函数中的 ajax 调用:

Here's the ajax call inside the pagecreate function:

$('#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.0正式发布后，我就没有使用过框架，所以可能在更新中解决了这个问题.本质上，我将 $.mobile.showPageLoadingMsg() 调用放入 pageshow 函数中，但将其包装在一个 if 子句中，该子句仅在第一次显示页面时触发:

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 pageshow function, but wrapped it in an if clause that only fires the first time the page is shown:

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.
        //
    });
});

这篇关于在 jQuery Mobile 中的 Ajax 调用中显示页面加载微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！