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