jQuery – Full Frontal Nerdity 2 Electric Boogaloo

Using HTML5’s Data Attributes With jQuery

While the HTML5 specification apparently won’t be finalized until 2014, you can use one of its more useful new additions, the data attribute, right now with jQuery for easy access to extra data.

When you are creating a dynamic page, you often need to store some additional data on an html element that will be used later when interacting with the page. Right now, developers often use non-existent class names or the rel attribute as a solution, or they add their own attributes, which is not valid HTML.

For example:

<img src="picture.jpg" largeimage="picturelarge.jpg">


<li rel="menu1">Menu item</li>

Browsers just ignore attributes they don’t support, so it has no negative effect. While this works, it is not the most elegant solution and is not valid HTML.

HTML5 introduces the data attribute to html elements. You can add multiple data attributes to an element. It works differently than other html attributes. The attribute begins with data, then has a dash and the name of the data item.

Example:

<img id="pic" src="picture.jpg" data-large="picturelarge.jpg"
data-productid="52" data-license="creative commons">

The img tag has three data attributes – large, productid and license. These can be accessed by getting the attribute, or by using the element’s dataset object. Each data attribute becomes a named property of the dataset object:

el.dataset.productid

Unfortunately, that method is not useable right now because of lack of browser support for the dataset object.

The solution is to use jQuery 1.43 or later, which has full support for the data attributes through the data() method. It does not rely on the dataset object, so it is compatible with non-HTML5 browsers.

Using the img example above, you can access the values of the data attributes like this:

$('#pic').data('productid') // 52

$('#pic').data('large') // picturelarge.jpg

While you could have just used the attr() to retrieve the value using the full attribute name ("data-productid"), the data() method is more elegant and readable, and has enhanced functionality. It can handle json encoded attributes, for example:

<li id='line1' data-options='{"color":"black","interior":"gray"}'>

Aston Martin</li>

The options attribute is automatically parsed by the data() method into named properties:

$('#line1').data("options").color //black

$('#line1').data("options").interior //gray

Data can also be added through code to an element with the data() method. It also has an event model that can be attached to for processing when data is read or set. For more info on data(), see the jQuery documentation on it.

jQuery provides an excellent way to start using HTML5 now without having to wait until browsers catch up.

Highlighting Table Rows with jQuery

When working with a table of data, it is helpful to add some type of highlight to the row to indicate the current row. This is extremely easy to do with a few lines of code in jQuery.

I have a table that has rows with two editable text boxes in them. When one of the text boxes receives focus, the row it is in becomes highlighted. When exiting, the row is no longer highlighted.

I have created a CSS class called highlight that adds a light yellow background:

.highlight { background:#FFFFCC;}

The table is just standard <tr>, <td> and <input> tags. The <input> tags do not have event handlers specified as attributes, they will be added in code.

The code is very simple. Two event handlers are added to all input textboxes, one for focus and one for blur. In the focus, the highlight class is added to the parent <tr> tag of selected texbox. On blur, the class is removed. I used the closest() function, which finds the closest element. It’s a shortcut to using .parent().parent() to get to the <tr> tag of the current row:

$('input').focus(function() {

 $(this).closest('tr').addClass('highlight');

});

$('input').blur(function() {

 $(this).closest('tr').removeClass('highlight');

});

The event handlers are added to all <input> tags. You will want to get more specific with the selector if you need to narrow down which elements cause highlighting. In the context of the event handler function, $(this) refers to the element that fired the event (the textbox).

That’s it. With a little CSS and jQuery, the table becomes more usable.

Working example