jQuery Mobile : What is the order of page events triggering?

Solution 1:

Intro

All information found here can also be found in my blog ARTICLE, you will also find working examples.

- A: Initialization

A1 - Phonegap app/framework initialization with the deviceReady event.

Example:

document.addEventListener("deviceReady", yourCallbackFunction, false);

function deviceReady() {

}

More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

A2 - jQuery Mobile app/framework initialization with the mobileinit event.

Example:

$(document).on("mobileinit", function () {

});

How to check if both frameworks are successfully loaded: https://stackoverflow.com/a/12821151/1848600

- B: Change page

First all events can be found here: http://jquerymobile.com/test/docs/api/events.html

Lets say we have a page A and a page B, this is a unload/load order:

1. page B - event pagebeforecreate

2. page B - event pagecreate

3. page B - event pageinit

4. page A - event pagebeforehide

5. page B - event pagebeforeshow

6. page A - event pageremove

7. page A - event pagehide

8. page B - event pageshow

- C: Minimize app

Phonegap handles this with a pause event.

Example:

document.addEventListener("pause", yourCallbackFunction, false);

More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- D: Restore app

Phonegap handles this with a resume event.

Example:

document.addEventListener("resume", yourCallbackFunction, false);

More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- Final words

There are few other phonegap and jQM events and you can find them in links mentioned above.

Something you should not use in jQM app:

$(document).ready(function(){

});

Reason:

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.