Create A Popup With Help Of Html5 Dataset API And jQuery

Before, in the HTML days developers has limited options to store arbitrary data that were associated to DOM elements. The only method that allowed developers to store arbitrary data was to add data in the form of “class names” or “rel” attributes. Though, it was possible for them to create their own attributes, but the task was tricky. Doing so, in fact, caused a lot of issues such as invalid code and search engine crawlers would ignore the data to name a few. But, thanks to HTML5 we were not only provided with the ability to add custom attributes with the help of data attributes, but also via a new API called as the “Dataset API”.

Assuming that you’ve knowledge about HTML5 and jQuery, through this post, I would like to discuss about Dataset API. In addition, I would provide a working example to demonstrate how you can use the HTML5 Dataset API to embed custom data attributes – ones that allow you to create a popup.

Dataset API – An Overview

With the release of HTML5 many new elements like “header”, “footer”, “article”, etc. and many new APIs including Page Visibility, Fullscreen, User Timing and many others were introduced. Apart from the new elements and APIs, HTML5 also brought into existence data attributes and the dataset API. It makes the custom attribute values associated to all elements in the HTML markup compared to the DOM elements stored on the memory.

Before talking about the dataset API, let us first understand what are data attributes. Data attributes (also referred to as custom data attributes) in HTML are strings that can be used to store anything in a website’s JavaScript so as to provide a more engaging user experience.

Let’s take an example, to see the usefulness of data attributes.

<div id=”mylist” class=”user_xyz list-size_4 maxweight_120″></div>

This is a line of JavaScript code where I am defining the maximum number of messages and ignoring the ones that are older than 120 days. As you can see,

The class attribute looks quite cumbersome, and it’s easy to make errors. Data attributes help us accomplish the same task in a relatively easy and effective manner:

<div id=”mylist” data-user=”xyz” data-list-size=”4″ data-maxage=”120″></div>

With data attributes, you can choose names prefixed with “data-”, thereby allowing us to choose names that aren’t just limited to a single word and rather comprises of multiple words.

So, now that you have an idea about data attributes, let’s proceed to discussing the dataset API. The API provide users a simple way to manage data attributes.

It allows us to create, retrieve and delete attributes values. The dataset API returns a DOMStringMap object, and the object’s keys are data-attribute names devoid of the “data- prefix”.

In simple words, the data attributes names are not prefixed with “data-”. And if any data-attribute name is separated using a hyphen, then that name is converted to camelCase. For instance, the data-user name will be converted to user, will data-maxage to maxage, and data-list-size to listSize (as shown in the above example).

Example – Creating a Popup Using Dataset API and jQuery

After creating custom attributes using the HTML5 dataset API, you can create a different type of effects using jQuery. To help you better understand this concept, below is an example that will create a popup, displaying the list of custom attributes you’ll create using the dataset API. To begin, I have written a simple HTML5 markup:

HTML STRUCTURE

<ul id=”empist”>
<li data-name=”Mark” data-designation=”Developer”><a href=”javascript:void(0)”>Mark</a></li>
<li data-name=”Brad” data-designation=”UI Developer”><a href=”javascript:void(0)”>Brad</a></li>
<li data-name=”Max” data-designation=”Content Writer”><a href=”javascript:void(0)”>Max</a></li>
<li data-name=”Jack” data-designation=”UI Designer”><a href=”javascript:void(0)”>Jack</a></li>
</ul>
<div class=”edit_popup”></div><!–popup container–>
<div class=”fade_overlay”></div><!–div used for overlay–>

jQuery Structure

$(document).ready(function() {
$(“#empist li a”).click(function(){
var ename = $(this).parent(“li”).attr(“data-name”);
var edesignation = $(this).parent(“li”).attr(“data-designation”);
$(“.fade_overlay”).show();
$(“.edit_popup”).show().html(“Designation of “+ename+” is “+edesignation);
});
});

Output:

Wrapping Up!
Are you still using the elements “class” or “rel” attributes for storing arbitrary data on the DOM to simplify your JavaScript? I’ll suggest you should avoid doing so, as it can cause a lot of issues, and most significantly will make you sacrifice validation to accomplish your objective. A better alternative to this is to use the HTML Dataset API. Hopefully, reading this post will provide you a better understanding of why you need the dataset API and how you can use it.

Author Bio – Sarah Parker is an experienced PSD to WordPress service provider, and a web designer. With this article, she is making people aware about creating a popup with help of html5 dataset API and jquery.