Question

5

JQuery Mobile 1.3.1 $.mobile.loading not working

rated 0 times [ 11] [ 6] / answers: 1 / hits: 23045 / 11 Years ago, mon, april 29, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradleymoisesy

Add To Favorites

Follow

Total Points: 121

Total Questions: 105

Total Answers: 95

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

bradleymoisesy questions

1 which data type to use to expect date value in jest

Wed, Dec 22, 21, 00:00, 3 Years ago

1 React/Next.js doesn't seem to work with Apexcharts

Tue, Jun 1, 21, 00:00, 3 Years ago

1 React chart : prevent chart's canvas scaling with height and width

Mon, Feb 1, 21, 00:00, 3 Years ago

1 How to create Create an Excel File with javascript?

Thu, Jun 11, 20, 00:00, 4 Years ago

1 How to create a search filter using Vue js from API Data?

Thu, Jan 16, 20, 00:00, 4 Years ago

View All

answered 11 Years ago damiondenzelc · Accepted Answer

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);