April 10, 2014

HTML5 Data Attributes and Javascript

We have an html page or an asp.net page with html elements and I want to store some data for the html elements on the client side. Prior to html5, we might be storing the data using hidden fields or query string but it's not really a clean approach and would require some javascript and matching the element and hidden field ids before it works.

To support the above use case html elements now has a new attribute "data-" and we can specify any name after the "data-". For example, we can have a data attribute like below.

  1. <div id="d1" data-grade="II" data-number="21" data-year="2014" data-class-teacher="Smith" data-json='{"name":"John"}'>


So this is cool as we can really specify as many data attributes as like. The attribute name will have the text "data-" to start with and the attribute value will have values just like any other xml or html attributes.

Another cool part is that the data attributes can be referenced from javascript. There are two ways to get the values of the data attributes. The not so cool way would be to get the data attribute in the following way.

  1. var grade = d.getAttribute('data-grade'); //not so cool


Though the above way works, we now have a much better way to get the data attributes using the dataset property on the element. For example, to get the same attribute value as above - we can call using the following way. Note that when data attributes have multiple dashes like "data-class-teacher", we need to use camel casing to call the attribute from javascript.

  1. var grade = d.dataset.grade; //cool
  2. var teacher = d.dataset.classTeacher;

 

Now, as an example, I have a html page with div and ul elements with data attributes and button that call javascript functions to get the values of the data attributes. Let's dive in to the html to see how it really works.

Data Attributes
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script>
  6.         function LoadData() {
  7.             Clear();
  8.             var d = document.getElementById("d1");
  9.  
  10.             //var grade = d.getAttribute('data-grade'); //not so cool
  11.             //var teacher = d.getAttribute('data-class-teacher'); //not so cool
  12.  
  13.             var grade = d.dataset.grade; //cool
  14.             var teacher = d.dataset.classTeacher;
  15.             var number = d.dataset.number;
  16.             var year = d.dataset.year;            
  17.             var json = d.dataset.json;
  18.             
  19.             document.getElementById("s1").innerHTML = "Year: " + year
  20.                 + "; grade: " + grade
  21.                 + "; no: " + number
  22.                 + "; teacher: " + teacher
  23.                 + "; json: " + json;
  24.  
  25.             LoadUlData();
  26.         }
  27.  
  28.         function LoadUlData() {            
  29.             var nodes = document.getElementById('ul1').children;
  30.             
  31.             for (i = 0; i < nodes.length; i++) {
  32.                 document.getElementById("s2").innerHTML += nodes[i].dataset.color + "; ";
  33.             }
  34.         }
  35.  
  36.         function Clear() {
  37.             document.getElementById("s1").innerHTML = "";
  38.             document.getElementById("s2").innerHTML = "";
  39.         }
  40.     </script>
  41. </head>
  42. <body>
  43.             <div id="d1" data-grade="II" data-number="21" data-year="2014" data-class-teacher="Smith" data-json='{"name":"John"}'>
  44.         <span id="s1"></span>
  45.     </div><br />
  46.  
  47.     <div>
  48.         <ul id="ul1">
  49.             <li data-color="red">red</li>
  50.             <li data-color="blue">blue</li>
  51.         </ul><br />
  52.         <span id="s2"></span>
  53.     </div>
  54.  
  55.     <input type="button" onclick="LoadData()" value="Show" />
  56.     <input type="button" onclick="Clear()" value="Clear" />
  57.  
  58. </body>
  59. </html>

0 comments:

Reference: Shahed Kazi at AspNetify.com