Tuesday, December 13, 2011

jQuery Mobile data-title behavior with multi-page template

The jQuery Mobile library comes with wonderful Ajax page transition capabilities. But you have to keep a look on the Page title as you navigate between the various pages and I have tried to document the behavior under different scenarios in this blog.

Consider the below code, click the below link to launch the code in a separate window.

<!DOCTYPE html>
    <title>Main Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <div id="page1" data-role="page" data-title="page 1 data-title">
      <div data-role="header">
        <h1>H1 Header of Page 1</h1>
      <div data-role="content">
        <p><a href="#page2" data-role="button">Go to page 2</a></p>
        <p><a href="#dialog" data-role="button" data-ajax="false">Open Dialog</a></p>
    <div id="page2" data-role="page" data-title="page 2 data-title">
      <div data-role="header">
        <h1>H1 Header of Page 2</h1>
      <div data-role="content">
        <p><a href="#page1" data-role="button">Go to page 1</a></p>
    <div id="dialog" data-role="dialog" data-title="dialog data-title">
      <div data-role="header">
        <h1>H1 Header of Dialog</h1>
      <div data-role="content">
        <p><a href="#" data-rel="back" data-role="button">Back</a></p>

This is a working example. Play with it to see how the page transitions occur. Now lets go through the various scenarios:
  1. When you first load this html, page 1 is displayed, you will first see the title as "Main Page". The <title> tag (document.title) always gets precedence.
  2. If the <title> tag is not present, you will get the address of the page shown as the title.
  3. Now click on the "Go to page 2" button, you will slide into page 2 and the title is shown as "page 2 data-title", ah so the data-title attribute is now working. So whenever an Ajax transition is used, the data-title is picked.
  4. From page 2, click on the "Go to page 1" button, now page 1 will open and the title is shown as "page 1 data-title", ignoring the <title> tag even if it is present or not. Again Ajax transition. But not always !!!
  5. Now in the code, remove the data-title attribute for page 2, navigate to page 2, you will see the title shown as "H1 Header of Page 2". So if the data-title attribute is missing, the text from the header is picked up.
  6. Now in the code, remove the data-title attribute for page 1, navigate to page 1 from page 2, you will see the title again being shown from the <title> tag, if the <title> tag was not present, then the title is shown as "H1 Header of Page 1".
  7. Now in the code, remove the entire "header" div from page 2, and also remove the data-title from page 2, now if you navigate into page 2 from page 1, if page 1 had <title> then that text is shown as the page 2 title, if page 1 didn't have the <title> tag, then the current title of page 1 is carried to page 2.
One could add a data-role="dialog" and view the same sort of behavior with dialogs. Dialogs also support data-title attribute. As per jQuery Mobile docs, even the headers (data-role="header") support the data-title attribute, but for some reason I just couldn't get it to work.

I feel point 6 above and the non working header data-title attributes are bugs in jQuery Mobile 1.0. Have to cross check further and log the same against jQuery Mobile.

5:30pm Updated:
For point 6 above: It is working as expected and not a bug. The internal implementation of jQuery mobile is that, the multiple pages are loaded and stacked, when a specific page link is clicked, jQuery Mobile gets that specific internal page and transition it into view. Here, page 1 was already available with document.title set to Main Page, so the same was shown in spite of Ajax navigation. If the <title> tag was not present, then the header text is used.

I have now logged a bug against jQuery Mobile for the data-title attribute under the Header: https://github.com/jquery/jquery-mobile/issues/3259

Read the next part of this post on how these scenarios play out in a single-page template.


  1. Added a bug against jQuery Mobile for the Header data-title now: https://github.com/jquery/jquery-mobile/issues/3259

  2. The bug logged in previous comment has now been accepted as valid.