jquery mobile $.mobile.showpageloadingmsg() is not working

Question

I wish to show loading message during page transition in jQM and backbone. But the showPageLoadingMeassage isnt working. Following is my code: collection.js

findById : function(artistId, page, limit, sort) {
    $.mobile.showPageLoadingMsg('a', 'Loading......', false);
    var self = this;
    if (limit == undefined) {
        limit = 10;
    }
    $.mobile.showPageLoadingMsg('a', 'Loading......', false);
    console.log("hello");
    $.ajax({
        type: "GET",
        url: siteURL + 'artists/artist_detail/artist_id'  + artistId  + '.json',
    }).done(function(msg) {
        var response = JSON.parse(msg);

        if (response.status == true) {
            var dataArray = response.data;
            console.log(dataArray);
            self.reset(dataArray);

            if (self.length > 0) {
                $.mobile.hidePageLoadingMsg();
            }
            //return  dataArray;
        } $.mobile.showPageLoadingMsg($.mobile.pageLoadErrorMessageTheme, 'Sorry! No records found', true);
            setTimeout(function() {
                $.mobile.hidePageLoadingMsg();
            }, 1500);
        }
    });
}

where am i getting wrong?

edited: it works when for search page:

... findByTitle : function(keyword, genre, language, page, limit, sort, collection, fan, featured) {
            //~ console.log(page);
            var self = this;
            if (limit == undefined) {
                limit = 10;
            }
            $.mobile.showPageLoadingMsg('a', 'Searching......', false);
            $.ajax({....

isn't working means that during the page transition, the loading msg does not show up. The console.log("hello") does get called but the msg does not show up. Hope i made myself clear. — z22
have you tried removing the AJAX call and simply leaving the message there without hiding it - to make sure it actually gets displayed at all? — Zathrus Writer
then the problem would be somewhere else, probably jQuery Mobile is not being included in the script? — Zathrus Writer
i have included jQM script- <script src="js/lib/jquery.mobile-1.1.1/jquery.mobile-1.1.1.js"></script> — z22

z22 z22 · Accepted Answer · 2012-12-04T10:47:52

found the answer on stackoverflow itself- jQuery Mobile - Problems getting showPageLoadingMsg to work with pagebeforeshow or pagebeforeceate. It says that sometimes jQM doesn't adds the ui-loading class to the body so we have to do it manually.

$('body').addClass('ui-loading');
    $.mobile.showPageLoadingMsg('a', 'Searching......', false);

and while hiding the loading msg:

setTimeout(function() {
    $('body').removeClass('ui-loading');   //remove class
    $.mobile.hidePageLoadingMsg();
}, 1000);

jquery mobile $.mobile.showpageloadingmsg() is not working

2 Answers