Search within TutorialsPark

jQuery Mobile : Page Events


Learn how to use jQuery Mobile page Events to get notifications when the page is changed.


jQuery Mobile: jQuery Mobile Page Events

jQuery Mobile has a set of events which allow the user to get notifications when some changes happen on the page.

Table : jQuery Mobile Page Events

Name Description
pageinit This event is triggered before a page is requested using Ajax
pageload This event is triggered when a page has been successfully loaded using Ajax
pagebeforechange This event is triggered before a page transition is performed.
pagechange This event is triggered after a page transition has been performed
pagechangefailed This event is triggered when a page change fails
pagebeforeshow The event is triggered before a page is displayed to the user
pagebeforehide The event is triggered before a page is removed from the display
pageshow The event is triggered after a page has been displayed to the user
pagehide The event is triggered after a page has been hidden from the user
pageinit The event is triggered when the page has been initialized

jQuery Mobile: Response to Page Transition

Page Transitions events can be used to notify when the user navigates from one page to another.

The events of pagebeforehide , pagehide , pagebeforeshow and pageshow are triggered for every page transitions, even if the page is displayed before to the user.

Syntax: jQuery Mobile Response to Hidden Page

Give it a TRY! » Note: An event is recieved only when the page is hidden.


jQuery Mobile: Response to Page Transition

Page Transitions events can be used to notify when the user navigates from one page to another.

The events of pagebeforehide , pagehide , pagebeforeshow and pageshow are triggered for every page transitions, even if the page is displayed before to the user.

Syntax: jQuery Mobile Response to Hidden Page

Give it a TRY! » Note: An event is recieved only when the page is hidden.


jQuery Mobile: Response to Page Transition

Page Transitions events can be used to notify when the user navigates from one page to another.

The events of pagebeforehide , pagehide , pagebeforeshow and pageshow are triggered for every page transitions, even if the page is displayed before to the user.

Syntax: jQuery Mobile Response to Hidden Page

Give it a TRY! » Note: An event is recieved only when the page is hidden.


jQuery Mobile: Page Initialization Event

The jQuery Mobile event pageinit is the event you respond to when you configure a jQuery Mobile page using a script

Also, making use of $(document).ready() is not an foolproof method when making use of jQuery Mobile.


jQuery Mobile: Handling Page Load Events

The jQuery page load Methods can be used to keep track of Ajax request made to download pages , either automatically generated by user input or programatically using loadPage and changePage Method.

Table : Setting for changePage Method

Name Description
url To Return the URL passed to the method loadPage.
absUrl The absolute URL
options The Ajax request options.
xhr To specify the jQuery Ajax object used.
textStatus A string description of the request status.

In the Demo, we use a deferred object to act when the page gets loaded.

Example: jQuery Mobile - pageload Event

Give it a TRY! » Note: The function is executed when the pageload event is triggered.


jQuery Mobile: Response to Page Transition

Page Transitions events can be used to notify when the user navigates from one page to another.

The events of pagebeforehide , pagehide , pagebeforeshow and pageshow are triggered for every page transitions, even if the page is displayed before to the user.

Syntax: jQuery Mobile Response to Hidden Page

Give it a TRY! » Note: An event is recieved only when the page is hidden.