My readers are probably sick and tired of me gushing over data attributes, and for that, I apologize. I'm just a huge fan of practical, useful solutions, and no, I'm not going to use this as opportunity to complain about how silly Canvas is again. Rather, I thought I'd whip up another simple example of how you can make use of data attributes in your shiny Ajax-enabled web sites.
If you don't remember what data attributes are, here's a quick reminder. Data attributes are a way to add ad hoc data to your DOM. By prefixing an attribute with data- in front of your name/value pair, your have HTML that is still valid no matter what name you use. So for example:
<img src="something" data-nsfw="true">
There is no data-nsfw attribute for the image tag, but because I began the attribute with data-, it's valid. Another example:
<img src="something" data-nsfw="true" data-hires="someurl">
In both examples, the browser blissfully ignores the custom attributes, but you can write your own code to do whatever you want with it. This comes in handy in numerous situations, but here's one simple example. Imagine I'm selecting data from a table that includes price information. To make it pretty, I'll wrap the output of the price in a function to render it as a currency. Here's an example in ColdFusion:
For the hell of it, here's the PHP version of it:
echo money_format('%i', $price) . "\n";
<div class="artPiece" data-id="#artid#" data-price="#price#">
<h2>#artname#</h2> Price: #dollarFormat(price)#<br/> Media: #mediatype#<br/> Artist: #firstname# #lastname#<br/> #description#<br/> <img src="/cfdocs/images/artgallery/#largeimage#"> </div>
<!--- get art work ---> <cfquery name="getArt" datasource="cfartgallery"> select art.artid, art.artname, art.description, art.price, art.largeimage, artists.firstname, artists.lastname, media.mediatype from art join artists on art.artistid = artists.artistid join media on art.mediaid = media.mediaid </cfquery>
You can ignore the SQL and most of the formatting. Focus on the fact that I've got a click handler on my div. Grabbing my two values is as simple as using jQuery's data method. You can demo this below.