Skip to main content

jQuery Mobile and Duplicated Page IDs

In the previous post, I touched upon how browsers safely handle duplicate IDs in a html file. Things seem to work fine for the three main uses of element IDs, i.e. linking to fragments, styling and referencing the element in javascript. The first element with matching ID is picked up and styling is done for all matches.


Now let us extend this test to the jQuery Mobile framework. You can launch the below multi-page code here.


 Launch 


<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile Duplicate IDs</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 data-role="page" id="p1">
      <div data-role="content">
        <p><a href="#p2" data-role="button">duplicate page id</a></p>
      </div>
    </div>
    <div data-role="page" id="p2">
      <div data-role="content">
        <a data-role="button" data-rel="back" data-direction="reverse">1 1</a>
        <a href="#p1" data-role="button" data-rel="dialog">Open Dialog</a>
      </div>
    </div>
    <div data-role="page" id="p2">
      <div data-role="content">
        <a data-role="button" data-rel="back" data-direction="reverse"> 0 </a>
      </div>
    </div>
  </body>
</html>


On load, when you click on the button, ajax is used to navigate to the page with ID p2, but here there are two IDs that match. The framework is not expecting this, and correctly so. Things go haywire. You have the resulting page rendered with seemingly garbled text, Actually both pages are rendered, but in a weird way. You will see the first button from both the pages, at the same location, merging the texts "1  1" and "  0  " to show "101". Then there is the second button which gets hidden, but its text "Dialog" is shown.


It gets interesting when you click on the button "101" now shown, as you can see from the code, it should take you back to the page ID p1. But here, two pages were rendered, and the first occurring page div slides out and for a brief instant you can see the second page container, which also slides out.


If you use the browser code inspector, you will see the data-url attribute being automatically added to all page divs. Since no data-url was specified here, the page ID is copied as is. In this case, both data-urls are the same. You can try the above example with different page IDs but having the same data-url and the resultant output is the same. 


<div data-role="page" id="p2" data-url="durl1">
......
<div data-role="page" id="p3"  data-url="durl1" >

One final scenario, suppose if the page IDs are duplicated but each page has a different data-url specified. 


<div data-role="page" id="p2" data-url="durl1">
......
<div data-role="page"  id="p2"  data-url="durl2">

And now try to navigate to any page using the data-url. 

<a href="#durl1" data-role="button">Open Page 1</a>
<a href="#durl2" data-role="button">Open Page 2</a>

Bingo! Both links work just works fine.


So jQuery Mobile primarily uses data-url for page navigation and as long as they are unique, navigation works just fine. And it was a purely accidental discovery that having duplicate data-urls messes up the rendered content.


Now is this a valid bug? I feel the framework should gracefully handle this and render only the first instance of matching data-url. The behavior would then be consistent with how various browser engines handle duplicate IDs (from my previous post). But again is this an overkill? Should the framework focus on adding more features that work correctly on multiple devices/platforms/browsers or fix such scenarios. That is a call that the jQuery Mobile developer community has to take.
Labels:

Comments

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