jQuery Mobile Page Events
jQuery Mobile Page Events
Events for handling pages in jQuery Mobile are divided into four categories:
- Page Initialization - Before page creation, and when the page has been created
- Page Load/Unload - When an external page is loading, unloading or encounters a failure
- Page Transition - Before and after page transitions
- Page Change - When pages are changed to or from, or encounters a failure
For a complete reference of all the jQuery Mobile events, please go to our jQuery Mobile Events Reference.
jQuery Mobile Initialization Events
When a typical page in jQuery Mobile is initialized, it goes through two stages:
- Before page creation
- Page creation
Each stage has an event that can be used to insert or manipulate code before or when jQuery Mobile enhances the page.
| Event | Description |
|---|---|
| pagebeforecreate | Triggered when the page is about to be initialized, and before jQuery Mobile has started enhancing the page |
| pagecreate | Triggered when the page has been created, but before enhancement is complete |
The example below demonstrates when each event fires when a page is created in jQuery Mobile:
Example
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event fired!");
});
Try it yourself »jQuery Mobile Load Events
Page load events are for external pages.
Whenever an external page is loaded into the DOM, 2 events fire. The first is pagecontainerbeforeload, and the second will either be pagecontainerload (success) or pagecontainerloadfailed (fail).
These events are explained in the table below:
| Event | Description |
|---|---|
| pagecontainerbeforeload | Triggered before any page load request is made |
| pagecontainerload | Triggered after the page has been successfully loaded and inserted into the DOM |
| pagecontainerloadfailed | Triggered if the page load request fails. By default, it will show the "Error Loading Page" message |
The example below demonstrates how the pagecontainerload and pagecontainerloadfailed events work:
Example
$(document).on("pagecontainerload",function(event,data){
alert("pageload
event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("Sorry, requested page does not exist.");
});
Try it yourself »jQuery Mobile Transition Events
We can also use events for when we transition from one page to the next.
Page transitions involve two pages: a "from" page and a "to" page - these transitions animate the change from the current active page (fromPage) to a new page (toPage).
| 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 example below demonstrates how the transition events work:
Example
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering
pagetwo
alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){
// When entering pagetwo
alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is now hidden");
});
Try it yourself »