• jQuery Mobile document ready vs pageinit events

    by  • September 11, 2014 • Blog • 2 Comments

    Working with jQuery Mobile events in a web mobile projects. I am wondering what is the best events we should capture to init our data for the apps. The problem is we have 3 type of events

    jquerymobile-mark-dark

    And

    And …

    So they are work well with me in my project but I am wondering what the deference from them.

    First all events can be found here: http://api.jquerymobile.com/category/events/

    Lets say we have a page A and a page B, this is a unload/load order:

    • page B – event pagebeforecreate
    • page B – event pagecreate
    • page B – event pageinit
    • page A – event pagebeforehide
    • page A – event pageremove
    • page A – event pagehide
    • page B – event pagebeforeshow
    • page B – event pageshow
    For better page events understanding read this:
    • pagebeforeload, pageload and pageloadfailed are fired when an external page is loaded
    • pagebeforechange, pagechange and pagechangefailed are page change events. These events are fired when a user is navigating between pages in the applications.
    • pagebeforeshow, pagebeforehide, pageshow and pagehide are page transition events. These events are fired before, during and after a transition and are named.
    • pagebeforecreate, pagecreate and pageinit are for page initialization.
    • pageremove can be fired and then handled when a page is removed from the DOM

    If for some reason page transition needs to be prevented on some condition it can be done with this code:

    And when page event use for handling particular page event, you can use the event something like this

     

    2 Responses to jQuery Mobile document ready vs pageinit events

    1. Jesica Ng
      September 22, 2014 at 5:52 am

      I always use document ready for all of my projects. I don’t see any problem. When you meet problem with document ready?

      • December 1, 2014 at 5:02 am

        In different browser on mobile and in the case you have many pages load/change page, in this case you will need this article.

    Leave a Reply

    Your email address will not be published. Required fields are marked *