If you are here you probably know what jQuery Mobile page events are so I will not describe them in great length. The knowledge of page event initialization order is important for any jQuery Mobile developer.
 
It will probably save you a lot of sleepless nights. When working with jQuery Mobile seasoned jQuery developers usually approach it from their experience using document ready to trigger the rest of a javascript when page is successfully loaded into the DOM. This is just fine in some cases but usually your jQuery Mobile code will only work if used with appropriate jQuery Mobile page event.
 
This article will discuss different page events order cases. One is related to the first initial page load where first page initialization is only thing we want to show, second one is related to page transition, from one page to another and third and last one is related to load page function used for page pre-loading. It will be all coupled with jsFiddle examples and links.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Page events list

 
 
  • pagebeforecreate – First event to occur before page is loaded into the DOM. This is an excellent event if you want to add additional content to your DOM. This is because at this point DOM content is still intact and jQuery Mobile is waiting to enhance page markup.
  • pagecreate – Second event to occur if page is still not loaded into the DOM. It marks that page is loaded into the DOM and can also be used in same fashion just like pagebeforecreate.
  • pageinit – This event is perfect replacement for classic jQuery document ready. At this point page markup is enhanced and like document ready it will trigger only once, at least in multi-page template. In multi-HTMl template pageinit will trigger every time page is about to be shown.
  • pagebeforehide – This is excellent event if you want to do something before page is hidden or before next page can be shown.
  • pagehide – Unlike previous one this page even will trigger after pages is hidden, used page template will determine is this page completely removed or just marked not-active (in case of multi-HTMl template this page is removed from DOM, unless it is marked for cashing).
  • pagebeforeshow – This event will trigger just before page is shown, it is also an excellent time to bind other events, like click etc.
  • pageshow – At this point page is shown. This event should be used for jQuery plugins that require precise page height cause only at this point page height can be calculated correctly.
  • pageremove – This event is triggered when page is about to be removed from the DOM, it will work only in case of multi-HTML template when page cashing is turned off.
  • pagebeforeload – This event will trigger when pageload function is used but before page is successfully loaded.
  • pageload – Just like previous event, but this one will trigger only on a successful page load.
  • pagebeforechange – This page event will trigger when changePagefunction is triggered but before page transition process. It will trigger even during normal transition because changePagefunction is called automatically each time page is about to be changed (I just wanted to clarify this, changePagedon’t need to be executed manually for this event to work). Must be bound to the document object, it will not work bound to a page div.
  • pagechange – Just like previous one, but this one will trigger on successful page change status.
 
Examples shown in this article will not show every event mentioned here. Reason for this is, at any given time, jsFiddle tool can handle only one virtual HTML page while some of these examples require multiple HTML files to work. In this example I am talking about pageload and pagebeforeload events.
 
Update: jQuery Mobile 1.4 brought new changes to how page events are handled and named, take a look here if you want to find more.
 

First page load

 
 
This is a rather simple case because only one process is going on. Page is transitioning from initial loading, markup enhancement process up to showing.
 
  1. pagebeforechange
  2. pagebeforecreate
  3. pagecreate
  4. pageinit
  5. pagebeforeshow
  6. pageshow
  7. pagechange
 
 

Page transition

 
 
This is a rather simple case because only one process is going on. Page is transitioning from initial loading, markup enhancement process up to showing.
 
  1. pagebeforechange
  2. Page 2pagebeforecreate
  3. Page 2pagecreate
  4. Page 2pageinit
  5. Page 1pagebeforehide
  6. Page 2pagebeforeshow
  7. Page 1pagehide
  8. Page 2pageshow
  9. pagechange
 

Load Page

 
 
This function is used for page pre-loading. It will not result with change page state, it will only load designated page into the DOM.
 
  1. pagebeforeload
  2. Page 2pagebeforecreate
  3. Page 2pagecreate
  4. Page 2pageinit
  5. pageload
 
Working example can be found here: http://example.gajotres.net/pagecreate/page1.html
 



All-around jsFiddle example

 
 
Before we proceed to jsFiddle example few words of warning. This example will work only with browsers with support for a console.log function. I didn’t use common alert function, console.log is much better suited for this example. Also, there wasn’t any point in appending this output to page content div, mainly because that would work only during the first case where only one page is loading.
 
First case can be tested right away, just open your console and run jsFiddle. Second case can be tested if button “Next” is pressed, it can be found in a top right corner of page header.
 
Link to the jsFiddle example: http://jsfiddle.net/Gajotres/QGnft/
 
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • app.appcoins.mobi – here is my problem. I don`t get pageshow event fired on my login.html page. Only pagebeforeshow. What am I doing wrong?

    • First make sure your code can even reach pageshow event.

      Don’t use .one if your binding page events. It’s better to use pageinit event which will trigger only once then to use function one witz a page show.

      Also, you should not mix .bind, .delegate, and .on, just use .on function, no point in mixing them all.

  • Steve Raptis

    Why is pagebeforeshow the ideal place to attach click events? What other events is it ideal to attach in pagebeforeshow?
    Except for your blog and your answers at stackoverflow there really is not much documentation about specifics like these.

    • Because a lot of jQuery developers still prefer to bind events like this:

      $(‘#someID’).click

      instead using delayed binding like this:

      $(document).on(‘click’,’#someID’.

      First example will work only in pagebeforeshow event because DOM is already build. The second example will work in any page even because this method does not require an existing DOM element.

      • Steve Raptis

        @dragangai:disqus Thank you I understood the difference, this blog has been extremely helpful well done!