0

I have a jQuery Mobile 1.3.0 app that is making Ajax calls to dynamically load data. I have seen various options for doing this in previous versions of jQuery Mobile (see Show Page Loading Spinner on Ajax Call in jQuery Mobile), but have not found an answer for 1.3.

The Ajax calls are similar to: 

$.getJSON(url, function(data) {
  console.log(JSON.stringify(data));
  $.each(data.cards, function(index, card) {
    $('#card-name').text(card.title);
  });
});

What is the best approach for displaying the loading spinner for each Ajax call?

Community
  • 1
  • 1
David M
  • 1,151
  • 12
  • 21

1 Answers1

6

After some research and trying several options, I found that this worked well for every Ajax call in the app. I added the following code toward the top of my JavaScript:

// Load the spinner if an ajaxStart occurs; stop when it is finished
$(document).on({
  ajaxStart: function() { 
    $.mobile.loading('show');
  },
  ajaxStop: function() {
    $.mobile.loading('hide');
  }    
});

In this way, no matter how many places I load data via Ajax, the jQuery Mobile loader (spinner) is displayed by adding this snippet of code one time.

If anyone knows of a better approach, please let me know.

David M
  • 1,151
  • 12
  • 21