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

This is a bit late...but you need to:

1. Call $.mobile.showPageLoadingMsg() before the AJAX call.
2. Make the AJAX call. The call needs to be sent asynchronously (put async: true in your call).
3. Add $.mobile.hidePageLoadingMsg() in your success() function.

Answer 2

You can use the beforeSend and complete events of $.ajax to call $.mobile.showPageLoadingMsg and $.mobile.hidePageLoadingMsg. Would look like this:

$('#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) {
                //...
            }
        });
    });