Comments on: Metadata within HTML comments

By: Web Standardista

Web Standardista — Mon, 29 Jun 2009 21:52:30 +0000

Another option…

http://docs.jquery.com/Internals/jQuery.data

By: James

James — Mon, 22 Jun 2009 16:51:38 +0000

@prafuitu, lol, silly me! 😛

By: prafuitu

prafuitu — Mon, 22 Jun 2009 15:52:52 +0000

:)) You’ve got to be kidding me:

$('.column').each(function(){
    // *this* IS the DOM element! 
    // There's no need to convert it into a jQuery object
    var data = commentData( this ); 
    var columnWidth = data.width;
});

By: Evan Byrne

Evan Byrne — Tue, 16 Jun 2009 01:04:58 +0000

@James, still, it just doesn’t seem right to me…

By: Jon

Jon — Mon, 15 Jun 2009 15:44:03 +0000

Thanks James, excellent article and much better than what I was doing (lots of dives inside a hidden div).

By: James

James — Mon, 15 Jun 2009 15:30:52 +0000

@Jon, $(this) is a jQuery object – commentData requires a DOM element reference. Here, try this:

$('.column').each(function(){
    var data = commentData( $(this)[0] ); // [0] references the DOM element
    var columnWidth = data.width;
});

By: Jon

Jon — Mon, 15 Jun 2009 15:28:47 +0000

All I wanted to be able to do was this…

$('.column').each(function(){
    var data = commentData($(this));
    var columnWidth = data.width;
});

I’m probably just being thick but if each column had an ID then I could do this….

$('.column').each(function(){
    var data = commentData(document.getElementById($(this).attr('ID')));
    var columnWidth = data.width;
});

By: James

James — Mon, 15 Jun 2009 15:14:14 +0000

@Lim, Sorry about that, just updated it. 🙂

@Jon, why would you want to supply it with a selector? The data is tied to the parent (commentNode.parentNode). This technique does not require the element to have an ID. The only reason I’ve given the element an ID in the example was to illustrate how you might extract that data via JavaScript.

@Evan, Sometimes, you may need to have a large amount of data existing within the document so you can use it when the user interacts with the page – this is preferred over Ajax when you have a small dataset and when interactivity is likely. There are many different applications. Read:

– http://loadaveragezero.com/app/drx/Data_Formats/Metadata
– http://www.1729.com/blog/HtmlAnnotations.html
– http://www.mail-archive.com/[email protected]/msg06489.html

Also have a look at jQuery’s “metadata” plugin (created by John Resig himself) to see an alternative implemenation.

By: Evan Byrne

Evan Byrne — Mon, 15 Jun 2009 14:07:20 +0000

Why would you want to store data inside HTML anyways? I don’t think I have/will ever come across a situation where I would have to do something like this.

By: Jon

Jon — Mon, 15 Jun 2009 14:03:14 +0000

It should be fairly easy to modify this so that you can supply it with a jQuery selector or a jQuery object, which would be useful when the element doesn’t have an ID, but my brain isn’t working today.

Would this be easy enough?