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

问题描述

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