Latest web development tutorials
 

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 »