This is part two of a three parts jQuery Mobile Tutorial. For introduction to the Tutorial please refer to Part I.

In Part I we developed simple static pages which form a foundation of the application we are building. In this part, we will start adding dynamic functionality.

The application will allow you to maintain a list of your favorite websites and share sites from the list with other mobile users through QR codes.

2.1 Adding a list

Let’s continue by adding a list of sites to the Home page. jQuery Mobile has a very strong list view capability. In Part III we will add ability to maintain the site list. For now let’s use a static, hardcoded list. Let’s start by replacing content area of the Home page with this:

Feel free to use any websites you like instead of the two included above.

Next we will add a page which will display QR code of a site:

At this point navigation between the Home page and QR Code page should be working. We are ready to start adding dynamic functionality.

2.2 Your first dynamic page

We will pass a site to be displayed on the QR Code page as a url parmeter. Let’s make one more change to the content of the Home page:

Parameters are encoded. In Part III we will handle encoding in the application code. For now, since we are hardcoding the site list, we are manually encoding the url parameters.

jQuery Mobile by default ignores url parameters. To handle them we need to start writing JavaScript code.

jQuery Mobile offers a number of custom events. One of them is pagebeforechange event. It can be used to capture requests to display the QR Code page and dynamically inject page content before presenting it to the user. Documented JavaScript code is shown below:

We are using Google Chart API to display the QR code. Please also note the use of :jqmData selectors. Here is a paragraph from the jQuery Mobile Documentation explaining the selectors:

“When finding elements by their jQuery Mobile data attribute, please use the custom selector :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.”

To find out more about dynamically injected pages please click here.

Complete HTML code to be used in conjunction with the JavaScript code we have just covered is shown below:

We also added a small css file to center display of the QR code.

This completes Part II of the Tutorial. You can access work in progress application on your mobile phone at Screen shots are shown below:

In Part III we will add site list management capabilities and complete the application.