I am writing a webapp using jQuery Mobile that calls a function to load records into localStorage and create a listview from a remote JSON file when the page is initially created (using the live.pagecreate() event for the page). At the beginning of this function is the jQuery Mobile method $.mobile.showPageLoadingMsg() and $.mobile.hidePageLoadingMsg() is at the end of the function.

On the initial pagecreate, the loading message does not appear (on iPhone 4 with iOS 4.3 Safari, Chrome 13 and Firefox 5). However, I also have a refresh button on the page; this button clears the associated records in localStorage then calls the same function used to initially populate the listview. However, when calling the same function from the refresh button the showPageLoadingMsg() and hidePageLoadingMsg() both work correctly and the Loading screen appears and disappears as it should. Am I missing something here?

ETA Here is the gist of the code (not in front of the actual code right now, if you need more I will put it in tonight). I also should mention that I've tried to put showPageLoadingMsg in (document).ready and have tried to bind it to mobileinit and neither have worked:

function loadListView(){
   $.mobile.showPageLoadingMsg();
   //ajax call to pull JSON
   //$.each loop to load localStorage and listview
   $.listview.refresh('list');
   $.mobile.hidePageLoadingMsg();
}

$(#listpage).live('pagecreate', function(event){
   loadListView(); // showPageLoadingMsg() and hidePageLoadingMsg do not work when the function is called here
});

function clearList(){
   //for loop that clears each item in localStorage that matches the key prefix set in loadListView
}

//runs when refresh button is clicked
$('listrefresh').live('click',function(){
   clearList();
   loadListView(); //showPageLoadingMsg() and hidePageLoadingMsg() work when the function is called here
});

I am writing a webapp using jQuery Mobile that calls a function to load records into localStorage and create a listview from a remote JSON file when the page is initially created (using the live.pagecreate() event for the page). At the beginning of this function is the jQuery Mobile method $.mobile.showPageLoadingMsg() and $.mobile.hidePageLoadingMsg() is at the end of the function.

On the initial pagecreate, the loading message does not appear (on iPhone 4 with iOS 4.3 Safari, Chrome 13 and Firefox 5). However, I also have a refresh button on the page; this button clears the associated records in localStorage then calls the same function used to initially populate the listview. However, when calling the same function from the refresh button the showPageLoadingMsg() and hidePageLoadingMsg() both work correctly and the Loading screen appears and disappears as it should. Am I missing something here?

ETA Here is the gist of the code (not in front of the actual code right now, if you need more I will put it in tonight). I also should mention that I've tried to put showPageLoadingMsg in (document).ready and have tried to bind it to mobileinit and neither have worked:

function loadListView(){
   $.mobile.showPageLoadingMsg();
   //ajax call to pull JSON
   //$.each loop to load localStorage and listview
   $.listview.refresh('list');
   $.mobile.hidePageLoadingMsg();
}

$(#listpage).live('pagecreate', function(event){
   loadListView(); // showPageLoadingMsg() and hidePageLoadingMsg do not work when the function is called here
});

function clearList(){
   //for loop that clears each item in localStorage that matches the key prefix set in loadListView
}

//runs when refresh button is clicked
$('listrefresh').live('click',function(){
   clearList();
   loadListView(); //showPageLoadingMsg() and hidePageLoadingMsg() work when the function is called here
});

• javascript
• jquery
• jquery-mobile

• Could you edit your question and add some code you've tried? – Phill Pafford Commented Aug 11, 2011 at 16:14
• @Phill I added the general code above. If needed I can add the actual code when I'm in front of it later. – scottoliver Commented Aug 12, 2011 at 0:23
• Just to point out, you shouldn't use .click instead you should use this. $('listrefresh').live('click',function(){ /*your code here*/}); If you happen to be using jquery mobile beta 1. use vclick instead of click. – root Commented Aug 12, 2011 at 8:10
• @jinyuan just changed the code as you suggested and it works just as well. Thanks! – scottoliver Commented Aug 13, 2011 at 22:10

1 Answer 1

For these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes. This can be done in the mobileinit handler, as described on the global config page.

Docs:

• http://jquerymobile./demos/1.0b2/#/demos/1.0b2/docs/api/events.html

Triggered on the page being initialized, after initialization occurs. We remend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

Example:

• http://jsfiddle/phillpafford/mKn8Y/8/

In the example none of the live events fire on initial page load, you have to configure this type of action in the mobileinit:

• http://jquerymobile./demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html