Loading message in JQuery Mobile

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>

lucasr300 · Accepted Answer · 2012-02-23 20:07:43Z

4

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(); 
});

edited Feb 23, 2012 at 20:07

lucasr300

6181 gold badge6 silver badges13 bronze badges

answered Jan 26, 2012 at 6:14

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jaya Mayu Over a year ago

It didn't help :( it shows the screen withou loading box :( thanks anyway for the detail explanation. appreciate it.

Jaya Mayu Over a year ago

This works when the ajax call is inside same page. When we navigate to new page this doesn't work. In my case when an Item in listview clicked it calles another page and loadz the ajax function (which is inside ListAccounts() ) does it rings a bell? thanks.

Jasper Over a year ago

The code you posted should work with regards to showing/hiding the loading message. Perhaps something else is causing an error, or the AJAX request is cached so it is instantly loading? Can you post a link to the page in question?

Jaya Mayu Over a year ago

Yes it was workign fine only the loader is not shown. Which page u want to see Jasper. Sorry I couldn't uderstand.

Nate Starner Over a year ago

$.mobile.showPageLoadingMsg(); doesn't work with the pageinit event. Try moving it to the pageshow event.

Collectives™ on Stack Overflow

Loading message in JQuery Mobile

1 Answer 1

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

Using Global AJAX Events to Your Advantage

An example of using the loading message with an animation

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

Using Global AJAX Events to Your Advantage

An example of using the loading message with an animation

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related