jQuery Mobile “Page” Events – Extra


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 $.mobile.pageContainer.pagecontainer("change", "URL").

It is worth mentioning that those events are emitted after pagebeforechange and before pagebeforecreate & 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.

pagecontainerbeforeload

Occurrence: Before loading an external URL
Delegate-able: No

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 pagebeforecreate & 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.

Some of ui object properties: external page‘s contents is under ui.page or ui.content , external page‘s URL ui.url, current page‘s full details ui.options,…etc.

This event can be utilized in many ways, for example, it is possible to do changes to loaded page before moving to it.


pagecontainerload

Occurrence: Successful load
Delegate-able: No

Exactly the same as pagecontainerbeforeload, but it fires after a successful Ajax call – External is loaded into DOM.

Again, pagebeforechange‘s second call, pagebeforecreate and pagecreate are emitted after this event.


pagecontainerloadfail

Occurrence: Unsuccessful load
Delegate-able: No

If Ajax call fails to load an external page, this one fires instead of pagecontainerload.

To understand those events more, check this demo and play around with its’ code.

Buy Me A Coffee :) @ ko-fi.com

Advertisements

4 thoughts on “jQuery Mobile “Page” Events – Extra

  1. great works. it does help me a lot. I was quit confused by the jquery mobile docs relating to pagecontainer. All hints in Stackoverflow are no longer current. Your blog and posts are the best one and the most current one i have ever found in the last 6 months, i am happy to read more of these good posts. Thanks.

  2. Pingback: useful links while working with jQuery mobile | IT Technologies
  3. Pingback: jQuery Mobile “Page” Events – What, Why, Where, When & How? (Updated) | jQuery Mobile Tricks

Drop me a line or two ;)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s