Question

How do i make the JQM loading message to show up when I’m trying to navigate from one page to another (single page template) using changePage("$('#page-id')", { transition: "none" });?

As of now i call $.mobile.loading("show"); before changePage happens.

I’ve tried the methods in this and this but it still doesnt work. Im using changePage on click of a button in the source page. The methods provided in the above links ONLY work on FF. Doesnt work on Android, iOS native browsers and on Chrome or on Safari.

Oh, And i’m using JQM v1.2.0 stable.

EDIT:
Heres the code im using

$(".listview").live("click", function () {
     $.mobile.loading('show', {
        text: 'Please wait... Loading...',
        textVisible: true,
        theme: 'a',
        textonly: true
    });
    var v1= $(this).attr("v1");
    //var CourseID = "";
    var v2= $(this).attr("v2");
    var v3= $.trim($(this).children("h3").text());
    var v4= $.trim($(this).find("span").children("span:first").text());
    var v5= $.trim($(this).children("p:last").text());
    $.ajax({
            async: false,
            type: "POST",
            url: "//url of the webmethod//",
            data: "{v1:" + v1+ ", p:" + id + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (msg) {
                ViewModel.variable1({ //binding data to ViewModel here//
                });
                $.mobile.changePage("#course-pg", { transition: "none" });
            },
            error: function (msg) {
                $("#errorpopup").popup('open');
            },
            complete: function () {
                $.mobile.loading('hide');
            }
        });
});

Answer 1

I had been pondering this forever, too.

Thing is, you may be doing everything, call the spinner, call the changePage, … Problem is (in my point of view), the spinner only shows while the page is loading and not while the loaded page is rendering. Say you load a gzipped page, which is 2k, that actually loads too fast for you to even see the spinner. Depending on the widget being loaded, enhancement takes quite a while, so your spinner is visible for the few ms the page loads, but not for the 2-3 seconds the page renders.

I’m using my own spinner call like this (JQM 1.1):

var spin = 
    function( what ){
        if ( what == "show"){
            console.log("SHOWIN");
            $.mobile.showPageLoadingMsg();
            } else {
            console.log("HIDING");
            $.mobile.hidePageLoadingMsg()
            }
        };

Put this in your code, and trigger it manually before you make the changePage call doing:

 spin("show");

and in the callback, or whatever handler you use afterwards,

 spin("hide");

This should give you an idea when the spinner shows and when it leaves.

If you are wondering, I wish the spinner would show during rendering. That would be much more useful, but I’m not sure this is possible.