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
});
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.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html
Triggered on the page being initialized, after initialization occurs. We recommend 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.net/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.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html
精彩评论