jQuery Mobile Loading in a function

Question

Ive created a function that I use to delete some data. It typically takes about 5-10 seconds or so. I really would like to add a loading spinner to the function.

function RefreshDataSubmit() { $.mobile.showPageLoadingMsg("a", "Loading"); //Deletes app data deleteAppData(); $.mobile.hidePageLoadingMsg(); }

I thought the above showPageLoadingMsg/hide would work however its not ever being displayed.

I'll post the solution if I find it.

Thanks for all the help!

The answer completely depends on the nature of the "deleteAppData" function. — Pointy
– Pointy, Commented Jun 19, 2013 at 14:16
Did you try this way? function RefreshDataSubmit() { $.mobile.showPageLoadingMsg("a", "Loading"); setTimeout(function(){ deleteAppData(); $.mobile.hidePageLoadingMsg(); }, 0); } — Denis Ryabov
– Denis Ryabov, Commented Jun 19, 2013 at 15:09

Gajotres · Accepted Answer · 2013-06-19 14:22:57Z

Let me guess, web kit browsers are not showing ajax loader.

This is a common problem when ajax loader needs to be dynamically shown. It can be fixed if setTimeout function is used to trigger show/hide action.

Something like this:

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

and

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

Also you are using deprecated methods, $.mobile.loading should be used instead.

Working example: http://jsfiddle.net/Gajotres/LW7MU/3/

I tried function RefreshDataSubmit() { setTimeout(function(){ $.mobile.loading('show'); },1); deleteAppData(); setTimeout(function(){ $.mobile.loading('hide'); },1); } and it did not work, am I doing something wrong?
Yes there's a problem with your code. $.mobile.loading('hide'); },1); will not wait function deleteAppData(); to end. Hide method must be placed at the end of deleteAppData(); method. Tell me have you tried to use only setTimeout(function(){ $.mobile.loading('show'); },1); just to see that ajax loader is working?

yeyene · Accepted Answer · 2013-06-20 08:50:55Z

Here is the scripts that works for me. DEMO http://jsfiddle.net/yeyene/Rdfxs/5/

function RefreshDataSubmit() { $(".ui-loader").show(); setTimeout(deleteAppData, 5000); //call Deletes app data //deleteAppData(); } function deleteAppData(){ // after your scripts, loading will hide, put behind all of your script // loading will hide after 5 sec in this example $(".ui-loader").hide(); }

Collectives™ on Stack Overflow

jQuery Mobile Loading in a function

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related