The second important concept in jQM is how the mobile pages are linked together. Understanding this concept can help us to design a web mobile application with a fluid user experience. In jQM, there are two ways to load an external mobile page: HTTP and Ajax. Depending on how we set the data- attribute, it interprets the href value and decides which way to load a mobile page. By default, apart from the first document load that is a normal HTTP transfer, the mobile page is loaded through Ajax.

The following block diagram explains how multiple mobile page blocks are managed within a document:

When a mobile page invokes another mobile page, the jQM framework basically parses the href value. Since this is an anchor reference, it indicates that this is an internal mobile page block. The framework locates the page block from the current DOM by matching the id value. It then initializes and renders the page, which also triggers the pageinit event for page B as shown in the previous block diagram.

Suppose we have two separate HTML documents in which a button on one page is referring to the other document. The following block diagram describes the scenario:

In this case, we add an attribute, data-ajax="false" (for the sake of a simpler approach to managing the JavaScript code), to tell jQM that this button requires a document load instead of a background Ajax load. This is important because otherwise the pageinit handler code (or any JavaScript file) inside the <script> tag will not be loaded for the new mobile page, B.html.

There is an alternative way to load Ajax in multiple documents, but we will leave it here. This is more than sufficient to implement a simple mobile web application. Readers can learn more from the jQuery Mobile documentation.