[javascript] jQuery Mobile: document ready vs. page events

I am using jQuery Mobile, and I am having trouble understanding differences between classic document ready and jQuery Mobile page events.

1. What is the real difference?

   Why should

   <!-- language: lang-js -->
   
   $(document).ready() {
   
   });
   

   be better than

   $(document).on('pageinit') {
   
   });
   

2. What is the order of page events, when you transition from one page to another?

3. How can I send data from one page to another and is it possible to access data from previous page?

The simple difference between document ready and page event in jQuery-mobile is that:

1. The document ready event is used for the whole HTML page,

   $(document).ready(function(e) {
       // Your code
   });
   

2. When there is a page event, use for handling particular page event:

   <div data-role="page" id="second">
       <div data-role="header">
           <h3>
               Page header
           </h3>
       </div>
       <div data-role="content">
           Page content
       </div> <!--content-->
       <div data-role="footer">
           Page footer
       </div> <!--footer-->
   </div><!--page-->
   

You can also use document for handling the pageinit event:

$(document).on('pageinit', "#mypage", function() {

});

This is the correct way:

To execute code that will only be available to the index page, we could use this syntax:

$(document).on('pageinit', "#index",  function() {
    ...
});

While you use .on(), it's basically a live query that you are using.

On the other hand, .ready (as in your case) is a static query. While using it, you can dynamically update data and do not have to wait for the page to load. You can simply pass on the values into your database (if required) when a particular value is entered.

The use of live queries is common in forms where we enter data (account or posts or even comments).

Some of you might find this useful. Just copy paste it to your page and you will get a sequence in which events are fired in the Chrome console (Ctrl + Shift + I).

$(document).on('pagebeforecreate',function(){console.log('pagebeforecreate');});
$(document).on('pagecreate',function(){console.log('pagecreate');});
$(document).on('pageinit',function(){console.log('pageinit');});
$(document).on('pagebeforehide',function(){console.log('pagebeforehide');});
$(document).on('pagebeforeshow',function(){console.log('pagebeforeshow');});
$(document).on('pageremove',function(){console.log('pageremove');});
$(document).on('pageshow',function(){console.log('pageshow');});
$(document).on('pagehide',function(){console.log('pagehide');});
$(window).load(function () {console.log("window loaded");});
$(window).unload(function () {console.log("window unloaded");});
$(function () {console.log('document ready');});

You are not going see unload in the console as it is fired when the page is being unloaded (when you move away from the page). Use it like this:

$(window).unload(function () { debugger; console.log("window unloaded");});

And you will see what I mean.