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
– Zathrus Writer, Commented Oct 6, 2012 at 20:45
and your mobileinit is on the page BEFORE you include jQuery Mobile JavaScript file? — Zathrus Writer
– Zathrus Writer, Commented Oct 6, 2012 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
– krishwader, Commented Oct 6, 2012 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, so we have some sample code? — Zathrus Writer
– Zathrus Writer, Commented Oct 6, 2012 at 21:13

frequent · Accepted Answer · 2012-10-06 21:39:01Z

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.

answered Oct 6, 2012 at 21:39

frequent

28.7k61 gold badges189 silver badges336 bronze badges

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

2 Comments

krishwader Over a year ago

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?

frequent Over a year ago

That's like a double no-no. Jquery Mobile says, don't use $(doc).ready and Jquery says don't use live.

krishwader · Accepted Answer · 2013-08-05 05:09:27Z

0

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.

edited Aug 5, 2013 at 5:09

answered Oct 23, 2012 at 20:43

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

Collectives™ on Stack Overflow

jquery mobile loading message during changepage()

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related