This is a follow-up post on the main one where I will explain some special events that fire when loading external pages via Ajax. Those events are also part of “Page Container” widget, however, they are emitted when an external page (URL) is loaded either by anchor
href="link.html" statically, loading a page without navigating to it
$.mobile.pageContainer.pagecontainer("load", "URL") or when moving to an external page programmatically
It is worth mentioning that those events are emitted after
pagebeforechange and before
pagecreate. Therefore, they grant you more control over external pages, e.g. you can redirect user or manipulate DOM of the loaded page before it is created.
Moreover, note that once you navigate away from an external page and DOM cache is disabled, it gets removed from DOM but remains in navigation history. Hence, if you navigate back to it, those event will fire again in addition to other “create” events. For more details, please refer to the diagrams in the main post.
As I have mentioned before, this event fire before moving to an external page (URL) via an anchor, loading a page or changing page programmatically. It fires after
pagebeforechange‘s first call and before
pagecreate. It emits an
ui similar to
pagebeforechange‘s on, yet richer. That object holds all data concerning current page and the loaded external page.
ui object properties: external page‘s contents is under
ui.content , external page‘s URL
ui.url, current page‘s full details
This event can be utilized in many ways, for example, it is possible to do changes to loaded page before moving to it.
Exactly the same as
pagecontainerbeforeload, but it fires after a successful Ajax call – External is loaded into DOM.
pagebeforechange‘s second call,
pagecreate are emitted after this event.
If Ajax call fails to load an external page, this one fires instead of