Tag Archives: DocumentFragment

Jquery Mobile – Dynamic Pages

9 Apr

Recently, I decided to make a mobile application. I have chosen to use a combination of Jquery Mobile and phone gap in order to achieve this goal.

I have found Jquery Mobile to be a good framework for making mobile applications however it is not long before discovering its abilities to dynamically generate content are not well documented. This is possibly because at the time of writing this, Jquery Mobile is in alpha status.

After googling round for quite a while, I discovered that there is a function called page(). That when applied to the end of an HTML fragment, it will convert the HTML into JQuery mobile appropriate HTML. The concepts of using this that are important are as follows

  1. Jquery mobile does not restrict functionality of Jquery.
  2. Jquery mobile parses an HTML document with the page() function to convert HTML to jquery mobile HTML (for better control/css theming etc).
  3. Jquery mobile will not parse updated html fragments added to the document unless you explicitly call the .page() function on that HTML fragment.
  4. In modern browsers, Jquery/java-script often  treats html blobs as a ‘documentFragment’ type which has virtually no functionality[W3C]. This can cause some confusion when calling the page function as the page function will fail on documentFragment types as discussed by me [Jquery Forum].
  5. Jquery mobile allows us to build phone gap and internet browser applications, allowing us to reach many markets with one solution.
  6. Jquery mobile is built on HTML 5. It uses the new meta data functionality for tags, i.e. <div data-tag=”taginfo” /> is valid in HTML 5 as any attribute on any tag that starts with data- is treated as meta-data (its not executed, but is recognized as valid by HTML 5 browsers).
  7. Jquery mobile has good examples but not always a good discussion of the concepts behind it, maybe I skipped over that part in my enthusiasm to get developing.
  8. Regular Updates. Currently they seem to release a new version of the alpha every 3 months.

An example of how to use the page function:

1) make sure you have a “page” on your html document:

   <div id="MyFirstMobilePage" data-role="page"></div>

2) add the following to the head of the document:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
      $('<select><option>test 1</option></select>').appendTo('#MyFirstMobilePage).page();

If you run this code with firebug etc. installed in your browser you will observe that the HTML gets updated, not only inserting the select tag, but also other tags that are required by the mobile framework.