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 fo

Solution 1:

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