Question

I’m using following code to show loading message in JQuery mobile. But the loading is not shown? I couldn’t figure out the issue. Thanks for your time in advance.

$("#AccountListPage").live('pageinit', function (event) {

   // alert('test');

    $.mobile.showPageLoadingMsg();

    listAccounts();

    $.mobile.hidePageLoadingMsg();

    //alert("Add Test");
});

When the comments are removed, the alerts work fine.

listAccount function

function listAccounts() {

    var soapMessage =
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">\
  <soap:Body>\
    <ReadByOrgID xmlns="http://eyepax.crm.com/Organization">\
      <OrganizationID>' + OrganizationID + '</OrganizationID>\
      <ConfigurationCode>' + ConfigurationCode + '</ConfigurationCode>\
      <Flag>' + Flag + '</Flag>\
      <LicenceOrganizationID>' + LicenceOrganizationID + '</LicenceOrganizationID>\
    </ReadByOrgID>\
  </soap:Body>\
</soap:Envelope>';
    soapMessage = $.trim(soapMessage);
    //$.mobile.pageLoading(true);
    $.mobile.showPageLoadingMsg();
    $.ajax({
        url: selectParentAccUrl,
        type: "POST",
        dataType: "xml",
        data: soapMessage,
        crossDomain: true,
        success: endListAccounts,
        error: function (jqXHR, textStatus, errorThrown) {
            $.mobile.hidePageLoadingMsg();
            alert("failure");
            console.log(textStatus);
            console.log(errorThrown);
        },
        contentType: "text/xml; charset=\"utf-8\""
    });

    return false;
}

function endListAccounts(xmlHttpRequest, status) {
    var testsss;

    console.log(xmlHttpRequest);
    console.log(status);
    console.log(Date());


    //testsss = $(xmlHttpRequest).find("Table OrganizationName:eq(0)").text();
    var result = $(xmlHttpRequest).find("OrganizationName").length
    //result = 3;

    var htmlString="";

    for (i = 0; i < result; i++) {
        htmlString = htmlString + "<li><a href='AccountDetails.html' onclick='AccountIndex="+i+"'>" + $(xmlHttpRequest).find("Table OrganizationName:eq(" + i + ")").text() + "</a></li>";


        accountConstructor($(xmlHttpRequest).find("Table OrganizationID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table ParentID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table OrganizationName:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table IncorporationNo:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table POBoxAddress:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table PhysicalAddress:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table VisitSwithboard:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table VisitFax:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table www:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table Active:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table MotherCompany:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table AccountManager:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table AccountManagerID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table VisitCountryID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table CountryID:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table CategoryCount:eq(" + i + ")").text(),
        $(xmlHttpRequest).find("Table ContactCount:eq(" + i + ")").text())
    }
    //alert(testsss);
    console.log('orgID : ' + testsss);
    console.log('count : ' + result);
    var b = $(xmlHttpRequest).find('vstrError').text();
    console.log('vsserr : ' + b);
    //alert('vssr : ' + b);
    $('#account_list').append(htmlString);
    $("#account_list").listview("refresh");
    console.log('account : ' + AccountArray[1].OrganizationName);
    //$.mobile.hidePageLoadingMsg();
    //$.mobile.pageLoading(true);
    $.mobile.hidePageLoadingMsg();
    // window.location = 'index.html';
    //$.mobile.changePage('index.html');

}

html page

<!DOCTYPE html> 
<html> 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="assets/jquery.mobile-1.0.css" />

</head> 

<body> 

<div data-role="page" id="AccountListPage">

    <div data-role="header">
        <h1>CRM Mobile App</h1>
        <a href="Account.html" data-icon="arrow-l">Back</a>
    </div><!-- /header -->
<div data-role="content">

<ul data-role="listview" data-inset="true" data-filter="true" id='account_list'>

</ul>


</div><!-- /content -->
    <div data-role="footer">
        <small>&#169; 2011 EyePax IT Consulting</small>
    </div><!-- /footer -->



</div><!-- /page -->
</body>
</html>

Answer 1

I’m assuming that the listAccounts() function does something asyncronously, like an AJAX request or an animation.

If that is the case then you need to put $.mobile.hidePageLoadingMsg() in the callback function for your the asyncronous code in the listAccounts() function. The reason is that the $.mobile.hideLoadingMsg() is running right after the $.mobile.showLoadingMsg() function, so close that it probably never gets drawn.

Here is an example of using the loading message with an AJAX call

function listAccounts () {
    $.mobile.showPageLoadingMsg();
    $.ajax({
        url : '<url>',
        success : function () {
            $.mobile.hidePageLoadingMsg();
        }
    });
}

$(document).delegate('#AccountListPage', 'pageinit', function () { 
    listAccounts(); 
}); 

Using Global AJAX Events to Your Advantage

You can setup global AJAX events in jQuery so everytime an AJAX request is sent, the loading message is shown (and removed when the AJAX request completes):

function listAccounts () {
    $.ajax({
        url : '<url>'
    });
}

$(document).delegate('#AccountListPage', 'pageinit', function () { 
    listAccounts(); 
}).ajaxStart(function () {
    $.mobile.showPageLoadingMsg();
}).ajaxComplete(function () {
    $.mobile.hidePageLoadingMsg();
});

An example of using the loading message with an animation

function listAccounts () {
    $.mobile.showPageLoadingMsg();
    $('#ani-element').stop().animate({
        WebKitTransform : 'scale(3)'//this cales the `#ani-element` DOM element to three times it's size in webkit browsers
    }, 500, function () {
        $.mobile.hidePageLoadingMsg();
    });
}

$(document).delegate('#AccountListPage', 'pageinit', function () { 
    listAccounts(); 
});