Geek Answers Handbook

JQuery Mobile: what is the order of triggering events on the page?

I need to quickly create a prototype for the application, and I would like to know exactly where to insert the various application logic.

Could you repeat the events and the order in which they were triggered when using PhoneGap and jQueryMobile?

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

  • A: When you first open the application .
  • B: When you change the page (I think some of the events will not be anymore).
  • C: When you "minimize" the application (for example: when you click on a link in the application that will lead you to sms / call or just click on the "Device Home" button).
  • D: When restoring the application (for example: pressing the "back" button or just "maximizing" it somehow).
+7
source share
1 answer

Introduction

All the information found here is also on my ARTICLE blog, you will also find working examples.

- A: Initialization

A1 - Launch the Phonegap application / framework with the deviceReady event.

Example:

document.addEventListener("deviceReady", yourCallbackFunction, false); function deviceReady() { }

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

A2 - initialization of the jQuery mobile application / framework with the mobileinit event.

Example:

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

How to check if both frameworks are successfully loaded: stack overflow

- B: Change page

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

Suppose we have page A and page B, this is the upload / download 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 the application

Phonegap handles this with a pause event.

Example:

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

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

- D: Restore application

Phonegap handles this with the resume event.

Example:

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

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

- Final words

There are several other events in the phone and jQM, and you can find them in the links mentioned above.

Something you shouldn't use in a jQM application:

 $(document).ready(function(){ });

Cause:

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

+24
source

More articles:


All Articles