Question

I’m building a web mobile app, using jQuery 1.1.1 and HTML5.

I would like to show the loading spinner when user click to open a page that grab data from XML files.

i’m using Ajax with GET to list data from a big XML file.

I found in the jQuery documentation there are an option but just for external page.

Thanks in advance

Here is the Answer of my Question “Thanks for your help”.

 $.ajax({
      type: "GET",
      url: "js/database/surah/"+$(this).attr("FileName"),
      dataType: "xml",
      async:   false,
      beforeSend : function () {
           $.mobile.showPageLoadingMsg();
      },
      complete : function(){
           $.mobile.hidePageLoadingMsg();
      },
      success: function(xml) {
      Ayah_nbr = $(xml).find('Verse').last().attr("VerseID");
 });

Answer 1

you mean a throbber?

just put a little spinning animation on your website and hide it by default.

with the before option on the ajax request you can display the throbber like this

$("#throbber").show();

and when the successs function of your request is fired you just hide it again! 🙂

$("#throbber").hide();

the throbber itself should be something like a little animation, maybe with a surounding div which covers the rest of the page, that noone can just click any other link or something.

you also can just display the throbber and delete the click handler on the link, that its not possible to fire the same action twice, if it takes more time than expected (eg. on a slow connection like UMTS!)