CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Dmitry Isakov
Dmitry Isakov

Reputation: 580

JQM removes my page

Having a very small example demonstrating my issue with jquerymobile:

JSFiddle - http://jsfiddle.net/forrest_gump/Q73Mk/3/

As you can see i call jqm changePage() and it appears for a second but the it is suddenly removed by #pageIndex

I spent a lot of time trying to find out why!?! Am I stupid or is it a jqm bug?

Upvotes: 1

Views: 98

Answers (1)

Omar
Omar

Reputation: 31732

Note that pageinit fires when page is ready to be shown but still hidden, as there is sequence of events that still not occurred on that page. Changing page doesn't stop those events from occuring, resulting in showing the target page for a while and reverting back to previous page.

You have two solutions for this:

  • Solution one:

    Delay changePage using setTimeout() to ensure that all page events are triggered.

    $(document).on('pagecreate', '#pageIndex', function () {
    setTimeout(function () {
        $.mobile.pageContainer.pagecontainer("change", "#pageLogin", {
            transition: "slideup"
        });
    }, 100); /* 100ms or more */
});

    Note: pageinit is deprecated and replaced with pagecreate. Also, $.mobile.changePage is replaced with $.mobile.pageContainer.pagecontainer("change", "#page", { options });.

    Demo

  • Solution two:

    Listen to pagebeforechange event to decide which page to show first.

    $(document).on("pagebeforechange", function (e, ui) {
    if (ui.toPage[0].id == "pageIndex" && typeof ui.options.fromPage === "undefined") {
        $.mobile.pageContainer.pagecontainer("change", "#pageLogin", {
            transition: "slideup"
        });
        e.preventDefault();
    }
});

    Demo

Upvotes: 1

Related Questions