YouTipjQuery Mobile Page Events
jQuery Mobile Page Events
In jQuery Mobile, events related to working with pages are divided into four categories:
- Page Initialization - Before a page is created, when it is created, and after it is initialized.
- Page Load/Unload - When an external page is loaded, unloaded, or fails to load.
- Page Transition - Before and after a page transition.
- Page Change - When a page is changed, or fails to change.
For complete information on all jQuery Mobile events, please visit our jQuery Mobile Events Reference.
jQuery Mobile Initialization Events
When a typical page in jQuery Mobile is initialized, it goes through three phases:
- Before page creation
- Page creation
- Page initialization
The events triggered at each phase can be used to insert or manipulate code.
| Event | Description |
|---|---|
| pagebeforecreate | This event is triggered when a page is about to be initialized and before jQuery Mobile has started enhancing the page. |
| pagecreate | This event is triggered when a page has been created, but before the enhancement is complete. |
| pageinit | This event is triggered when a page has been initialized and after jQuery Mobile has finished enhancing the page. |
The following example demonstrates when each event is triggered when creating a page in jQuery Mobile:
Example
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event triggered!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event triggered!");
});jQuery Mobile Load Events
Page load events belong to external pages.
Whenever an external page is loaded into the DOM, two events are triggered. The first is pagebeforeload, and the second is pageload (on success) or pageloadfailed (on failure).
The table below explains these events:
| Event | Description |
|---|---|
| pagebeforeload | Triggered before any page load request is made. |
| pageload | Triggered after a page has been successfully loaded and inserted into the DOM. |
| pageloadfailed | Triggered if a page load request fails. By default, an "Error Loading Page" message is displayed. |
The following demonstrates how the pageload and pageloadfailed events work:
Example
$(document).on("pageload",function(event,data){
alert("pageload event triggered!nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("Sorry, the requested page does not exist.");
});jQuery Mobile Transition Events
We can also use events when transitioning from one page to the next.
A page transition involves two pages: a "from" page and a "to" page - these transitions make the change from the current active page (the "from" page) to the new page (the "to" page) more dynamic.
| Event | Description |
|---|---|
| pagebeforeshow | Triggered on the "to" page, before the transition animation starts. |
| pageshow | Triggered on the "to" page, after the transition animation completes. |
| pagebeforehide | Triggered on the "from" page, before the transition animation starts. |
| pagehide | Triggered on the "from" page, after the transition animation completes. |
The following demonstrates how the transition events work:
Example
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering page two
alert("Page two is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){ // When entering page two
alert("Now showing page two");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // When entering page two
alert("Page two is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
alert("Now hiding page two");
});