jQuery Mobile Wait until next page is ready before loading

Question

I've been experimenting with jQuery Mobile. I am trying to implement the following

• When a user clicks on an events navbar along the bottom they will proceed to view a list of events.
• This list is generated via an AJAX request from a server.
• Currently the page loads regardless of whether the list is available or not and then subsequently displays the information once it has finished loading. Untidy!!

I would like to display the jquery mobile loading popup until the page is ready and then continue.

In the jQueryMobile Docs and Demos under 'list views' and 'list performance tests' this performs as how i would like mine to.

I've tried binding to the 'pagebeforeshow' event but to no avail.

Any help would be greatly appreciated.

Answer 1

I also encountered same issue while loading pages. I used below code to eliminate

$(document).on("pagebeforeshow","#page",function(){ 
$("#header").empty();
$("#content").empty();
$("#footer").empty();
});

$(document).on("pageshow","#page",function()
{
$("#header").append("<h2 align='center'>"+'Header'+"</h2>");
$("#content").append("<h2 align='center'>"+'Content'+"</h2>");
$("#footer").append("<h2 align='center'>"+'Footer'+"</h2>");
});

Answer 2

try to put a click handler on the GUI item that you mentioned - the navbar.

in that function make the ajax call, and in the success function of the ajax call once you have setup your item show the next page.

To show the load spinning wheel use:

$.mobile.showPageLoadingMsg();

You move to the next page using:

$.mobile.changePage

Answer 3

use this functions to hide and show loader and your own in java script

 //show loader
var showLoader = function () {   
        $('.ui-loader').css('display', 'block');
   }

 //hide loader
var hideLoader = function () {
            $('.ui-loader').css('display', 'none');
   }