using $.mobile.loading inside pagebeforechange event
All,
I've developed a small app that's capturing "pagebeforechange" in order to update the DOM whenever the user presses a tab.
My purpose in capturing and processing pagebeforechange was to allow me to update only part of the DOM (via loaded JSON data from an AJAX call) while leaving the rest of the page untouched. The idea was taken from an example I found on the web where the author dynamically updated their DOM whenever certain URL's were seen in an <a href> element.
For the purposes of my very simple code, the pagebeforechange is being triggered as I would expect. I am, though, noticing on my 3G device that the AJAX call can, sometimes, take 10 or 15 seconds to return.
I feel bad for the user who might be thinking the app crashed, or worse. So I've added
$.mobile.loading('show', { theme: "a", text: "Loading...", textonly: false });
before I do all my AJAX calls and before I process the returned data. At the end, I call $.mobile.loading( 'hide' ); to clear the message box. The problem is - nothing is displaying during the data load and processing / formatting. I can see via entries in console.log that I'm in all of my code, and the code IS executing.
Should $.mobile.loading() display inside of the "pagebeforechange" event?
Thanks for any info!
Robert