Skip to main content

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.
Launch

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <div id="page1" data-role="page" data-title="page 1 data-title">
      <div data-role="header">
        <h1>H1 Header of Page 1</h1>
      </div>
      <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>
    </div>
    <div id="page2" data-role="page" data-title="page 2 data-title">
      <div data-role="header">
        <h1>H1 Header of Page 2</h1>
      </div>
      <div data-role="content">
        <p><a href="#page1" data-role="button">Go to page 1</a></p>
      </div>
    </div>
    <div id="dialog" data-role="dialog" data-title="dialog data-title">
      <div data-role="header">
        <h1>H1 Header of Dialog</h1>
      </div>
      <div data-role="content">
        <p><a href="#" data-rel="back" data-role="button">Back</a></p>
      </div>
    </div>
  </body>
</html>


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.
Labels:

Comments

  1. chetankjainDecember 13, 2011 at 5:13 PM

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

    ReplyDelete
  2. chetankjainDecember 16, 2011 at 9:34 AM

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

    ReplyDelete

Post a Comment

Popular posts from this blog

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>   <HEAD>     <TITLE>A small HTML</TITLE>   </HEAD>   <BODY>     <P>Small HTML file!</P>   </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi...
19 comments
Read more

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file. The  id  attribute specifies its element's  unique identifier (ID) . The value must be unique amongst all the IDs in the element's  home subtree  and must contain at least one character. The value must not contain any  space characters . An element's  unique identifier  can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code, Launch dup.css #p2 {   background-color: yellow;  } dup-id.html <!DOCTYPE html> <html>   <head>     <title>Duplicate ID Tester</title> <link rel="stylesh...
9 comments
Read more

Fixing Date, Time and Zone on RHEL 6 command line

Had to fix all time related issues on a remote RHEL 6 server which runs without any windowing system. Plain ol' command line. Documenting steps here for future reference: Check to see if your date and timezone settings are accurate: # date # cat /etc/sysconfig/clock The server I accessed had wrong settings for both the commands. Here are the steps I used to correct: Find out your timezone from the folder /usr/share/zoneinfo # ls /usr/share/zoneinfo Mine was pointing to America/EDT instead of  Asia/Calcutta Update and save the /etc/sysconfig/clock file to # sudo vi /etc/sysconfig/clock ZONE="Asia/Calcutta" UTC=true ARC=false Remove the /etc/localtime # sudo rm /etc/localtime Create a new soft link to your time zone # cd /etc # sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime # ls -al localtime Now it should show the link to your time zone Set your hardware clock to UTC # sudo hwclock --systohc --utc # hwclock --show Update your t...
16 comments
Read more