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

Question

I have to build fast a prototype for an application and I would like to know exactly where to insert various application logic.

Could you iterate the events and the order in which they trigger when using PhoneGap and jQueryMobile?

It would be great to have a clear understanding of events/order for:

• A: When you open the application for the first time.
• B: When you change page (I guess there won't be some of the events anymore).
• C: When you "minimize" the app (Ex: when you click a link in the app which takes you to sms/call, or you just press device's home button).
• D: When you restore the app (Ex: hitting the "back" button, or just
  "maximize" it somehow).

Answer 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.