jquery mobile loading message during changepage()

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

that's very strange, the loading message should show up when you call changePage() automatically... do you have page loading widget settings set up correctly? — Zathrus Writer
and your mobileinit is on the page BEFORE you include jQuery Mobile JavaScript file? — Zathrus Writer
@ZathrusWriter yes it is! I debugged my code and the loading msg disappears the minute the debugger reaches the changePage(). On mobile browser there is a comfy 3 sec delay between the click which has the changePage() bound to it and the second page appearing. I wish to fill it with the loading msg. — krishwader
sorry if I sounded rude with the uppercase before, just wanted to make sure :) ... anyways, this is quite puzzling... do you think you could try and replicate it using jsfiddle, so we have some sample code? — Zathrus Writer

frequent frequent · Accepted Answer · 2012-10-06T21:39:01

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.

jquery mobile loading message during changepage()

2 Answers