Skip to main content

jQuery Mobile data-title behavior in single-page template

In my previous post, I had visited the behavior of the jQuery Mobile library data-title attribute under different scenarios when using a multi-page template. In this post, I will outline the behavior when using a single-page template.
Consider the below single-page template code. Click here to launch the below code in a separate browser.
Launch

mainpage-title.html



<!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="Mainpage data-title">
      <div data-role="header">
        <h1>Header of Main Page</h1>
      </div>
      <div data-role="content">
        <p><a href="secondpage-title.html" data-role="button">Go to Page 2</a></p>
      </div>
    </div>
  </body>
</html>

secondpage-title.html

<title>Second Page</title>
<div id="page2" data-role="page" data-title="Page 2 data-title">
  <div data-role="header">
<h1>Header of Page 2</h1>
  </div>
  <div data-role="content">
<p><a data-role="button" data-rel="back">Go Back</a></p>
  </div>
</div>

This is a working example. Play with it to see how the page transitions occur. Now lets go through the similar scenarios as in previous article:

  1. When you first load this html, main page 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", you will see this is a minimal html file. HTML5 makes semantics much more simpler. Browser knows what to do. Again here, since Ajax transition was used, the data-title is picked up and not the document.title which was "Second Page".
  4. From page 2, click on the "Go Back" button, now main page will open and the title is shown as "Main Page", itself and not the data-title text. This is different from multi-page template behavior. Now why did that happen? The reason here is, when Main page was first loaded, document.title gets populated, which gets precedence and is used. Now every visit to this page uses the same document.title value instead of what is there in data-title attribute. But since page 2 (newly loaded) was via Ajax, the data-title gets picked up first and not the <title> tag. This is the way it is implemented.
  5. Now in the code, remove the data-title attribute for page 2, navigate to page 2, you will see the title shown as "Second Page", now the <title> is picked up.
  6. If <title> was missing in page 2, "Header of Page 2" is displayed, the text from the header.
  7. Now in the code, remove the data-title attribute for main page, navigate to main page from page 2, you will see the title again being shown from the data-title tag this time. So the title is shown as "Mainpage data-title".
  8. 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 the main page, then the current title of main page is used.
So when you compare the behavior of page titles from single-page to multi-page templates, the order of precedence is different while picking the title of page 2 from the <title> tag (as outlined in point 4 above).
Labels:

Comments

  1. Jeet's BlogOctober 22, 2013 at 6:27 PM

    Hey Chetan,

    - how come there is no html and head tag in page 2 source code ? If i refresh the page 2 it doesn't render correctly as above tags are missing.

    Isn't it important to add <html and <head tags in every single page ?

    - A question : If I have to render dynamic data that loads to DOM of 2nd page through the query parameter of the 2nd page url, how do I do that ? can u help me in that ?

    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