CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
sharf
sharf

Reputation: 2143

Get the loaded page in jQuery Mobile 1.4.2

I'm used to the older jQuery Mobile interface where I could write:

$("#page").on("pageLoad", function(){
    //Do something
});

With the newer pageContainer widget and it's events, I do not know to do detect what page was loaded.

For example, I need to know how to detect that the #settings page was just loaded. So far I can figure out

$("body").on( "pagecontainerload", function( event, ui ){});

but I have no way of knowing what page was loaded. I've tried using the returned event and ui values but without success.

It seems part of my problem is coming from improper use of

$("body").pagecontainer("load", "welcome.html");

I use that in the beginning of my js file to load them all into the DOM. However, when I navigate to that page, then away from it again it is removed from the DOM. For example, I load welcome.html, settings.html, and devices.html with the above code. Then, I have links like

<a href="#settings" class="navigation" data-icon="gear" data-transition="slide">Settings</a>

And when I use that link to go to the settings page, then another of the same kind of link to go to the devices page, the settings link no longer works. Upon inspecting the DOM, #settings has been removed. Infact, so has #welcome. As soon as I navigate away from that page it is removed from the DOM. So either I have done something wrong, or my understanding of the pagecontainer widget is flawed.

Upvotes: 2

Views: 981

Answers (1)

Omar
Omar

Reputation: 31732

Update

Based on your updated OP, external pages are removed once you navigate away from them, this is the default behavior of jQM. If you want to keep those pages, you need to add data-dom-cache="true" to page div of each external page.

You can retrieve page loaded from ui object emitted on pagecontainerload.

$(document).on("pagecontainerload", function (e, ui) {
  var loadedPage = $(ui.page),
      pageID = loadedPage[0].id;

  if (pageID == "settings") {
    /* code */
  }
});

Note that pagecontainerbeforeload, pagecontainerload and pagecontainerfail, are only emitted on pages loaded externaly. Moreover, they will fire everytime an external page is loaded, unless DOM cache is enabled. Read more about those events here.

Demo

Upvotes: 1

Related Questions