• Client-side
    • Add Me!Close Menu Navigation
    Add Me!Open Categories Menu
  • Client-side

    • Injecting data in the DOM with the jQuery data() method

    A few months back I stumbled on the jQuery data() method. It saved me some time, code and resources, and provided me a clean way to inject DOM nodes with custom data. Didn’t have the time to blog about it at the time, but it’s really a little gem, so here’s some background on how I deployed it.

    Earlier this year I was challenged at work to come up with a JavaScript version of a Flash-based tool, which our survey participants use to evaluate visuals. Basically they can click on an image, enter a textual comment and save their feedback for our analysts to review and report it to our clients. Users also expect to update or delete comments they just saved. Due to the rise of mobile web usage, the existing Flash-based tool wasn’t fully covering our userbase any longer, so we had to replace it with a JavaScript version.

    I first started with a simple JavaScript object to hold the values for each comment, which were …

    • X coordinate of the comment, relative to the image
    • Y coordinate of the comment, relative to the image
    • Text entered by the user
    • Sentiment of the comment (positive, neutral or negative)
    • DOM id of a marker positioned absolutely on the image to indicate a comment once saved

    After finishing the development, I wasn’t all that happy with the outcome. Sure the tool was working as expected, but the read-and-write operations on the JavaScript object to retrieve & save previously saved comments resulted in unnecessary bloat. Since I could not come up with a better solution at the time, I let it be and decided to have another go at it later.

    A few weeks later I discovered the data() method offered by jQuery. I immediately realized it could help me to get rid of the backing JavaScript object used to hold the comment data.

    Since I used marker visuals to indicate any made comments by absolutely positioning those markers on top of the image, I figured out that I could simply attach the comment data to the related marker using data(). Then when someone clicked a marker, I could simply use $(this).data() to retrieve the comment data linked to the clicked marker. A bit later the bloat was gone, the code was more efficient and I was happy.

    I cannot disclose the exact code of this tool, but here’s an example that shows how to use the data() method to store and read data related to a DOM id.

    Here’s some mark-up

    	<span id="data-holder">This span should hold the data</span>
	<input id="my-value" type="text" />

	<a id="store" href="#">Click here to store the text you've entered</a>
	<a id="retrieve" href="#">Click here to retrieve the data</a>

    	// storing data
	$('#store').click(function(){
		jQuery.data($('data-holder'), 'mykey', $('my-value').val());
	});

	// retrieving data
	$('#retrieve').click(function(){
		alert(jQuery.data($('data-holder'), 'mykey'));
	});

    This is a really powerful feature, since it allows you to forget about keeping track of a backing object that holds the data, or try to store the data in a hidden DOM node for example. You simply save the data with the related DOM node. So when a user in my example removes the visual marker for the comment, all the related data is destroyed together with it, no extra operations needed!

    So your data ends up in a logical place, removing the unnecessary overhead. Lovely, isn’t it?

    Posted By Shahways Romani

    Developer working on both the front & back-end side of the web. Consulting attitude, with an eye for marketing. Loves fresh coffee, and a good game of poker.

    Comments are closed.