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

Inside AJAX call? (but will work anywhere)

$.ajax({ url: ..., 
    type:'post', dataType:'json',
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); },
    complete: function(){ fSpinner('hide'); },
    success: function( res ){...},
    error: function(e){ alert('Error: ' + e.responseText) }
});

And the function itself:

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

Answer 3

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/

Answer 4

the code for the other answers did not work for me and is not complete (e.g. if you like to pass parameters eventually or just use boolean true/false for toggling. The following provides a nice way to do this:

/** workaround: $.mobile.loading not working correctly: http://stackoverflow.com/a/17725350 */
function showLoading( on, params ) {  // on: true|false
    setTimeout( function() {
      if ( on )
        $.mobile.loading( "show", params );
      else {
        //$.mobile.loading( "hide" );  // does not seem to work (e.g. using with GWT and jQM 1.4.3)
        $('.ui-loader').remove();  // removes the loader div from the body
      }       
    }, 1);
}

use it like this:

showLoading( true );  // show loader
showLoading( false );  // hide loader