JQuery Mobile 1.3.1 "$.mobile.loading" not working

Question

I have the following code:

HTML:

<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

JS:

$(document).on({
  ajaxStart: function() { 
    $.mobile.loading('show');
    console.log('getJSON starts...');
  },
  ajaxStop: function() {
    $.mobile.loading('hide');
    console.log('getJSON ends...');
  }    
});

I'm using Jquery Mobile 1.3.1 and testing this code in mozilla firefox and google chrome at the moment. I'm going to use it in a phonegap app later on.

I'm loading a JSON and displaying it on screen in a listview. While it loads, I want the program to show a "loading spinner". Console log shows that ajaxStart is firing but there is no visual spinner anywhere on the screen.

What am I doing wrong? Please Help!

Thanks in advance.

Answer 1

What jQuery Mobile documentation is lacking information regarding successful execution of:

$.mobile.loading('show');

and

$.mobile.loading('hide');

They will show ONLY during the pageshow event. In any other case you need to wrap them into the setinterval, like this:

In case you don't know anything about pageshow and rest of jQuery Mobile page events take a look at this ARTICLE, it is my personal blog. Or find it HERE.

First, you will not be able to show/hide AJAX loader without set interval. There's is only one situation where this is possible without and that is during the pageshow event. In any other case setinterval is needed to kick start the loader.

Here's a working example: http://jsfiddle.net/Gajotres/Zr7Gf/

    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    

    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);      

Answer 2

Wrapping it in setTimeout works. I just have a simple function to do it:

function loading(showOrHide) {
    setTimeout(function(){
        $.mobile.loading(showOrHide);
    }, 1); 
}

Then just call it when you want to show or hide the spinner:

loading('show');

or

loading('hide');

Here's a silly jsfiddle: http://jsfiddle.net/7UpW5/