Show Page Loading Spinner on Ajax Call in jQuery Mobile

Question

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 di

Answer 1

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