Understanding Links, URLs and Pages in jQueryMobile

Disclaimer: In this post I am referencing the third beta-release of jQueryMobile, internally called "1.0b3", that was released 5 days ago. Future Versions may work differently.

Introduction
Imagine you have a standard website at www.myWebsite.com. If you are adding a link on your website that is referring to another page of the same website, you add something like this <a href="/myInternalUrl">myLink</a>. No matter on what current page you are at the moment, your Browser will make an synchronous HTTP-Get Request that fetches the page at the given Url and opens this page in your browser.

Behaviour with jQueryMobile
With jQueryMobile this is a whole lot different! In your sourcecode you can also add links like so: <a href="/myInternalUrl">myLink</a>. However instead of making a synchronous call, jQueryMobile automatically handles the onClick-Event on that link and will trigger an Ajax-Request, that loads the data. This has two advantages:

• The UI stays responsive
• jQueryMobile has the chance to process the newly loaded data, before it is shown to the user

In fact this feature is one of the most integral parts of jQueryMobile and the hardest do understand. So let us dig depper.

Loading a Page

Every content in jQueryMobile is supposed to be embedded into a page. As you can see here a page is nothing more than a div, which has the HTML 5 attribute data-role="page". This div basically contains three more divs, one with the data-role="header", on with data-role="content" and the last with data-role="footer". This is obviously similar to the concept of how most of the Views in iPhone application look like.

A single HTML-Document however may contain more than a single page. This has the advantage that the client only needs to do a single HTTP-Request to load several pages, and he doesnt need to wait again when he naivgates between these pages. The number of pages you want to embedd in a single HTML-Document is obviously limited by the amount of time you want your users to wait for the first page.

If the user clicks on a link within your page, one of the following applies:

• The page that is represented by that link was already loaded. jQueryMobile can therefore show that page right away.
• The page needs to be loaded from the Server. jQueryMobile will then show a loading screen and load this data asynchronously via an Ajax-Request.

But how does jQueryMobile know, if the requested page that is represented by the link, was already loaded or needs to be loaded? To understand this, we need to look at the attribute data-url and id of pages.

Data-Url and Id of Pages

The div that represents a page can, like every other HTML-Tag, contain an id. If the page has a unique Id, you can use that to point to the page, instead of using the Url. For example a click on <a href="#impressum">impressum</a> will trigger jQueryMobile to look for a previously loaded page, whose id is "impressum". If no such page is found, an error will be thrown.

The Url that is displayed to the user in the browser bar when he is on that page will be www.myWebsite.com/previousUrl#impressum. This means that the Url shown in the browser bar actually depends on the Url of the page, where you clicked on that link.

Fortunatly jQueryMobile offers a workaround. By using the attribute data-url inside your page-div you can specify the Url that should be displayed for this page. For Example just add data-url="/mobile/impressum" as an attribute to the impressum page, and the Url that is shown in the browser bar will always display www.myWebsite.com/mobile/impressum for this page.

Because the Id of that page hasn't changed, you can still reference to that page via <a href="#impressum">impressum</a>. Even the link <a href="/mobile/impressum">impressum</a> will point to the very same page. You should always be sure to use the latter, if you don't know if the client has already loaded the page. 

Please will free to give Feedback on my Post! I am looking forward to any comments!