jQuery Comments() Plug-in To Access HTML Comments For DOM Templating

Nice work Ben - good idea

definitely great idea. about 2 years ago i created something similar to dreamweaver templating using comments and js. i should have it somewhere here...

Cool idea. I haven't thought of a need for it yet, but you could use this method for holding data on the page as well. You could put json in your comments, then do an eval(jComments.html()) to get the object.

I would think that over all, the jQuery.data() would be the best way to store something like JSON.

I'm still really liking the idea of having my html snippet templates in comments rather then a hidden element someplace.

Though maybe another thought, this would also be a great way for the server to leave JS some instructions on certain elements, without having to fudge hiding them in the attributes. I know I'm guilty of picking an obscure attribute on a tag, to tell JS that this is a ..whatever.. and including a short list of actions of what can be done with that object. But now, I call say anything I want to JS in the comments, and not have to worry about the classic "Oh shoot, I ran out of attributes, except the title attribute.. that's going to look really ugly if I put it in there.".

Thanks Ben.

Would it also be possible to use {{ and }} like James to select the comments that contain JS relevant html?

nice work man, I'm thinking about implementing this =)!

thank you,

LuK

this is pretty cool. the last piece to my puzzle is finding a good way to template the html. the catch is that is much conform to POSH html. This solution is 1 of 2 that i found. the other is located here : http://www.west-wind.com/Weblog/posts/509108.aspx

there is actually one more i found that uses <#= variableName #> which would probably work as well.

I'm just not sure this would work well. you see, if a template were used, it could still look correct in a html editor. the designers would have full control over the html and css. then, when the page is displayed, certain classes assigned to elements would trigger an ajax call, and the template would be updated with the returned ajax data.

this is to remove the need to server side scripting by a developer. all info is gathered by api calls to a REST server. the data returned, just needs to up shown to the user. however, the UI still needs to be functional if the user clicks on any elements that require functionality.

Got any solutions Ben?

Thx 4 your answer, would I have to adjust something to make the script recognize the brackets?

i emailed this, but i figure i would post it here as well, in case anyone is interested.

hey Ben,

i just finished a function that will update a template dynamically.

ok so POSH html, is short for "Plain Old Semantic HTML".

* Validate your HTML
* Stop using tables for layout
* Use semantic elements and attributes for their intended purpose
* Use semantic class names and id values
* Use as little HTML as will get the job done

so it completes separates presentation from functionality. all styles are done through css. as usual. The example shown on

http://www.west-wind.com/Weblog/ShowPost.aspx?id=509108 are pretty good. the first one especially, but thats personal choice. because it follows this POSH html idea. sometimes, some templating engines have control structures in them, like if statements and loops, kinda like how smarty has. well, i might as well just use PHP in it. so this totally separates the presentation from the business logic. theres lots of documentation about it as well.

so, the project i am working on now, the deisgner, can work on the html for the template part, the and and js can always udpate template, regardless of how its structured. I am now getting into API's for all my apps as well. So i have written a REST server that accepts REST requests, and sends back the data in json ( or any format requested ), so now, any developers just need to worry about the front end part. All the back end, db stuff for example is already done via API calls. So, the developer just needs to worry about presentation. thats aside from the POSH html stuff. I just wanted to give you a background on how I am developing this project and a few lined up. So, now, I just wrote a 3 line function that will update a template dynamically.

If you want to see what I am talking about, if you have time. check out :

http://victor.hostopia.com/posh/index.html

just look at the source. The js part would be in its own file, this is just a testing page. You will see a function called updateTemplate() that updates a template one field at a time, like how it does on that example site, but updateTemplateDynamically() updates one dynamically.

So anyways, i've been looking for a templating system, and i think i can use the first one from the example site, plus a few modictications and it should be alright.

man jquery is totally awesome. Thanks for your reply. I never talk to any programmers outside of my work place. its cool to talk with you. take care man.

=)...Doesn't really matter, one is also good, thx anyways for the script and also for your nice jQuery indept tutorial (found this yesterday)!! Very nice (I'm only half way through but it's a very good collection of jQuerys features!)

THIS IS GREAT SITE

You can also use

<script type="text/template">

Your template

</div>

This will be also ignored by browsers, and I think by screenreaders too. You can also easier access it.

Hey Ben,

I would like to make one recommendation for your jQuery comments script. It is always a good idea to wrap your jQuery plugins in a closure. Simple wrap the code your have above with:

(function($) {

... your function here

})(jQuery);

This will help isolate the code from anything else in the DOM and helps when compressing files together.

Best,
James

This is very useful. I've just found myself needing it just two days ago but don't know how to write jQuery for it.

Thanks a lot.

This is awesome! Thanks alot.

Can i use it for realtime update of comments list? I don't undestend how it may work, but i need it %(

FYI: If you try to add markup containing comment nodes to a document, i.e. via innerHTML, IE8 will silently discard the comments.

I really like the idea. I came across this requirement, when I was crawling a website. The HTML was a mess (full of nested tables, with inline style, and no id, no name, etc.). The only way to extract data was to use regular expressions, and finding some specific elements, one of which was HTML comments.

This code is fine. Thanks.

I know this is a little old, but it showed up pretty high on a Google search for reading comments in jquery. I made a few small changes, since I had td tags in my comments that were getting stripped away. I modified the parameters so that they could take a jquery object representing the new container, as opposed to always using a div:

var newParams = new Object();
newParams.JqParent = $("<div />");
newParams.BlnDeep = false;

if (params !== undefined) {

	if (typeof (params) == "object") {
		if (params.jquery) {
			newParams.JqParent = params;
		}
		else {
			newParams = params;
		}
	} else if (typeof (params) == "string") {
		newParams.JqParent = $("<" + params + " />");
	} else if (typeof (params) == "boolean") {
		newParams.BlnDeep = params;
	}
	else {
		return;
	}
}

params = newParams;

var blnDeep = params.BlnDeep;
var jComments = $([]);

I also changed the part where it adds to the jquery array so that it doesn't use text to render, as that was removing my td tags:

// We found a comment node. Add it to
// the nodes collection wrapped in a
// DIV (as we may have HTML).
var newNode = params.JqParent.clone();
jComments = jComments.add(
	newNode.html(objChildNode.nodeValue)
	);