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](http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html) set up correctly? — Zathrus Writer, Oct 06 '12 at 20:45
and your `mobileinit` is on the page BEFORE you include jQuery Mobile JavaScript file? — Zathrus Writer, Oct 06 '12 at 20:53
@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, Oct 06 '12 at 20:56
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](http://jsfiddle.net/), so we have some sample code? — Zathrus Writer, Oct 06 '12 at 21:13
No problem :) This is a big application so i dont think can replicate using a fiddle. I've edited the question with some sample code..hope it helps :) — krishwader, Oct 06 '12 at 21:34
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/17657/discussion-between-jqliker-and-zathrus-writer) — krishwader, Oct 06 '12 at 21:36

score 1 · Accepted Answer · answered Oct 06 '12 at 21:39

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.

well, i guess you're right if we take the connection to be wifi/3g/4g. any ideas why the mobile browser doesn't show it when im on an old-class GPRS connection? Isn't that slow enough for the loader to show up? **A DOUBT OF CONCERN:** this piece of code is under `$(document).live("ready", function() { }`. Could that be a problem? — krishwader, Oct 06 '12 at 21:49
That's like a `double no-no`. [Jquery Mobile](http://jquerymobile.com/test/docs/api/events.html) says, don't use `$(doc).ready` and [Jquery](http://api.jquery.com/live/) says don't use `live`. — frequent, Oct 06 '12 at 22:08

krishwader · Answer 2 · 2013-08-05T05:09:27.087

I finally found a way to solve this problem. Its literally un-orthodox and I have no idea why this was the only way. Anyway, here goes. I created an anchor tag with href set to the second page and hid it using css.

<a href="#page-id" id="linktonext" style="display:none">Click here</a>

I first have $.mobile.loading("show"); and after the ajax call gets the data a trigger click to this anchor tag happens. On the pageinit of the second page, I fill the page with data from the ajax call. After this, I call $.mobile.loading("hide"). Works perfectly.

jquery mobile loading message during changepage()

2 Answers2