If you want to have full control over your jQuery Mobile application first thing you need to learn is page events, their sequence, order and how to properly use them. Even more, you need to understand when they will trigger, at wait point and how to delegate them. Last year I covered almost everything related to jQuery Mobile page events, now time has come to do it all over again.
 
 

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.


 

Intro

 
Up to this point of jQuery Mobile 1.4 page events worked on per page basis, basically you would bind a page event to a certain page div and wait for it to trigger. Page event sequence order looked like this:
 
BulletPHP
Image taken from.
 
This way of page event handling is now deprecated (Note: because of community outcry deprecation process was moved to jQuery Mobile 1.5), according to jQuery Mobile developers, old way of page handling was just a temporarily solution.
 
When jQuery Mobile 1.4 rolled out it brought us some major changes to page event handling, mainly pagecontainer widget. Almost every page event was renamed and incorporated into mentioned widget, some like pagebeforecreate, pagecreate were left intact. New page event sequence order looks like this:
 
BulletPHP
Image taken from.
 
BulletPHP
Image taken from.
 

New page event sequence order

 
  • mobileinit – The very first event that fires – even before .ready(), it fires after loading core jQuery and before loading core jQuery Mobile.
  • 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. This event is replacement for pageinit event which no longer exists (currently is deprecated).
  • pagecontainerbeforehide – This is excellent event if you want to do something before page is hidden or before next page can be shown.
  • pagecontainerhide – 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).
  • pagecontainerbeforeshow – This event will trigger just before page is shown, it is also an excellent time to bind other events, like click etc.
  • pageremove – 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.
  • pagecontainerremove – 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.
  • pagecontainerbeforeload – This event will trigger when pageload function is used but before page is successfully loaded.
  • pagecontainerload – 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, changePage don’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.
  • pagecontainerbeforetransition – Alternative version of pagebeforechange event, you should switch to this one over time because I think pagebeforechange is also going to be removed
  • pagecontainertransition – Alternative version of pagechange event, you should switch to this one over time because I think pagechange is also going to be removed
 
Continue Reading

  • David

    Thanks for theses explanations, very useful because there is a lack of help with jquerymobile 1.4.3

    So I migrated to 1.4.3 an nothing is working now 🙁 They really change many things regarding page events

    First, I never succeed to catch this event !!! $(document).on(“pagecontainershow”, function (e, ui) { alert(‘hello’);}

    Then I have a problem with changing page. I will try to be clear :
    – I have a form
    – When I submit it, I display a popup from submitHandler method of form validator-> $(“#id_confirm_saisie_chauffage”).popup(“open”);
    – In this popup, I have 2 buttons
    – With the OK button, I record my form into a db and close the popup -> $(‘#id_confirm_saisie_chauffage’).popup(‘close’); It works…
    – Then I want to go back to the previous page with $.mobile.pageContainer.pagecontainer(“change”, “chauffage_graphique.php”);
    – but it go back to the previous page (what I wanted) and then return to the current one (the form) !!!! the path in the browser is the path of the previous page. I wonder why !!

    So any help or proposition will be really appreciate

    Thanks

    David