jQuery Mobile -> Page Lifecycle?

Question

Is there something like a lifecycle for jQuery Mobile pages? Like events that get fired on init, show, hide/back, or whatever events?!

Thanks in advance!

Answer 1

Intro

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

During the page transition:

event pagebeforecreate

event pagecreate

Best event if you want to dynamically add page content and let jQuery Mobile style yout new content. Don't use it in case of ajax call, pagebefore show should be used then but all dynamically added content them must be manually enhanced.

event pageinit

It will only trigger once per page load, any return to the page will not trigger it again, unless page is manually refreshed

event pagebeforehide

event pagebeforeshow

Best event for the page manipulation

event pageremove

event pagehide

event pageshow

Only event where other graphic jQuery/javascript can be initialized and used, like graph tools or carousels

Rest of them:

event pagebeforechange

Will always trigger twice so skip it

event pagechange

Will always trigger twice so skip it

If you want to find more about this topic and how page events work overall take a look at my other ARTICLE. Or find it HERE. Just search for the chapter called Page events transition order. But also read everything anywhere.

Official documentation: http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Answer 2

Just like Android activity lifecycle. jQuery Mobile pages have different events. You can check out the list of events from the official documentation for jQuery Mobile 1.3.0.

1. pagebeforechange
2. pagebeforecreate
3. pagebeforehide
4. pagebeforeload
5. pagechange
6. pagechangefailed
7. pagecreate
8. pagehide
9. pageinit
10. pageload
11. pageloadfailed
12. pageremove
13. pageshow

and much more jQuery Mobile events documentation available here

In my openion pagebeforeshow, pageshow and pagecreate are the commonly used events.