In this section, we will look at why we don't use the traditional DOM-ready method to run initialization code for mobile pages. Suppose a page's content requires some sort of initialization, then using the traditional DOM-ready method $.ready can have a negative effect. This is because the $.ready method runs as soon as all the DOMs inside the document are loaded. In other words, we have no control over when to run the jQM page initialization code if it is inside the DOM ready handler.
However, jQM provides a specific event, pageinit, that caters for this scenario. All we need to do is to assign an id value inside the <div data-role='page'> markup, then define the pageinit event handler for that id value. Whenever a page is going to be initialized for display, this event is triggered. Note that the $.ready method is still going to be called, but we just don't use it in jQM. To demonstrate this concept, let us use the previous multipage example with an additional $.ready call:
<script type="text/javascript">
$(document).on('pageinit', '#main_page', function() {
alert('jQuery Mobile: pageinit for Main page'),
});
$(document).on('pageinit', '#config', function() {
alert('jQuery Mobile: pageinit for Config page'),
});
$(document).ready(function() {
alert('jQuery ready'),
});
</script>
</head>
<body>
<!-- MAIN PAGE -->
<div data-role="page" id='main_page'>
<div data-role="header">
<h1>jQuery Mobile</h1>
<a href="#config" data-rel='dialog'
data-icon="gear"
class='ui-btn-right'>Options</a>
</div><!-- /header -->
<div data-role="content" id=''>
</div>
</div><!-- /page -->
<!-- CONFIG PAGE -->
<div data-role="page" id='config' >
<div data-role="header">
<h1>Config</h1>
</div><!-- /header -->
<div data-role="content">
<a href="" data-role="button"
data-rel="back" >Cancel</a>
</div>
</div><!-- /page -->There are two mobile pages defined in this example: main_page and config. Each mobile page is tied to its pageinit event handler. With the $.ready method, we can observe the call sequence with other pageinit events. When we first load the document to the browser, we see the following screenshot:
Remember that jQM always displays the first page in the HTML body. That means the pageinit event for main_page is fired as soon as the DOM for main_page is fully loaded and initialized for the display. It is also important to understand that, at the point of execution, the DOM for the subsequent config page is not loaded yet. When we touch the OK button, the execution resumes and the DOM for the config page is then loaded. Hence all the DOMs in the document are loaded and the $.ready method is then called; it shows the second alert message as shown in the following screenshot:
When we touch the
OK button, the alert box disappears and the control returns back to the browser. Now, if we touch the Options button in the top right-hand corner, the config dialog page is initialized and displayed on the screen. Hence the pageinit handler for the config page is called:
