New South Tech Blog Post

New South Tech Blog Post.md

jQuery .data() object and HTML5 data- attributes

Post on December 29, 2012 by Clay Stewart tagged: code samples, data-attributes, html5, jquery

Play with the final result of this post on this fiddle and fork it: http://jsfiddle.net/BmXWv/

I’ve been toying around with adding data-* attributes to my DOM to carry certain information on page load that can be picked up with javascript functions for certain user actions or in ajax calls, and I had trouble finding good resources for this out on the internet.

On finally conquering this .data() function (getting & setting data with it), I thought I would add to the conversation with a blog post in case others out there on the interwebs are having similar issues. This jsFiddle http://jsfiddle.net/drZmc/ spurred on my final result.

First I wanted to print out a

with a count from my php, and for testing purposes I put in two buttons to make the count number go up and down, respectively.

<div id="number-of-posts-div" data-numberOfPosts="5">5</div>
<br />
<br />
<input type="button" id="number-go-up" value="up" />
<input type="button" id="number-go-down" value="down" />

Then when I add a “post” (whatever ‘post’ means for you … maybe its a new photo via ajax upload and spitting it back out .. maybe it is just text) to my DOM, I also wanted to update that count of posts in the header, so I created some test functions to see if I could make that happen with my buttons. I can later take out the click function part of the function and just include a function like this makePostsNumberGoUp(1); at the end of the ajax call that puts that post back out on the DOM with a .prependTO(id) or .appendTo(id).

// initialize both up and down functions on document ready with this one tester function
jQuery(document).ready(function() {
        testerfuncttodelete(); 
});
 
// initialize these click functions to make the count go up or down by 1
function testerfuncttodelete() {
        makePostsNumberGoUp(1); 
        makePostsNumberGoDown(1);
}
 
// Increase the count function
function makePostsNumberGoUp(numbertoadd) {
        var numpostsdiv = jQuery('#number-of-posts-div'); // grab the div and set to a variable
 
        // click function for button with id number-go-up
        jQuery('#number-go-up').click(function() {
                // grab the data in the attribute data-numberOfPosts="" which in this case has a value of 5 
                var postscount = numpostsdiv.data('numberofposts');
                        console.log(numpostsdiv.data('numberofposts')); // logs original number in the cache to the console -- 5
                // make sure the data gotten is an integer - this is probably unnecessary as jQuery data() does a good job of parsing
                var postscountint = parseInt(postscount);
                // add your numbertoadd var that was passed into this function to .data('numberofposts')
                // so newTotal = 5 + 1 -- equaling 6
                var newTotal = postscountint + numbertoadd;
                        console.log(newTotal); // logs number in the cache increased by 1 to the console -- 6
                jQuery('#number-of-posts-div').html(newTotal); // put the new total inside the div
                numpostsdiv.data('numberofposts', newTotal); // update the data()'s cache with the new total
                // as long as you don't refresh the page - the value of data('numberofposts') is now 6 even though 5 will still be seen on the DOM
        });
 
}
 
// Increase the count function
function makePostsNumberGoDown(numbertosubtract) {
        var numpostsdiv = jQuery('#number-of-posts-div'); // grab the div and set to a variable
 
        // click function for button with id number-go-up
        jQuery('#number-go-down').click(function() {
                var postscount = numpostsdiv.data('numberofposts');
                        console.log(numpostsdiv.data('numberofposts'));
                var postscountint = parseInt(postscount);
                newTotal = postscountint - numbertosubtract; // only line that is different from above function subtracts instead of adds
                        console.log(newTotal);
                jQuery('#number-of-posts-div').html(newTotal);
                numpostsdiv.data('numberofposts', newTotal);
        });
 
}

Other pages I found along the way:

• jQuery’s data() api documentation
• HTML5 Spec Calls For Altering Your Data
• SO jQuery .data() does not work, but .attr(“data-itemname”) does
• A less helpful fiddle – but show the difference between getting the data as an attribute and from the .data() function
• jquery assign value to key via .data() not working
• Is there a cleaner way with data-attribute
• jQuery’s Data Method – How and Why to Use It

Unrelated links (but fun finds):

• How to clear and input checkbox – also works with radio buttons – good for end of a dialog window and resetting the dialog
• ASCII character for up/down triangle (arrow) to display in HTML — great for some quick arrows
• Check to see if a checkbox is checked – great for passing a checked value straight into an Ajax call as a var
• A buddy of mine just started working for this Database company in Austin, TX