I’m normally a server side guy, at least when it comes to programming. But a recent project at work gave me a chance to work on some simple DOM scripting.
Another programmer was working on a form and in looking over the UI I said we needed to have the option for multiple authors or editors to be assigned to a blog. His first thought was to add a wizard asking “How many authors/editors would you like?” After answering that, you would then be taken to a page with the proscribed number of fields.
I hate wizards! Hate them, hate them, hate them!
That’s harsh, and I know they have _some_ good uses.
For most tasks that our producers encounter, a wizard just means having to click the same options over and over again.
What most users need is a one-sheet form that can grow to accomodate their needs. Enter client-side scripting!
So here are the technologies/techniques that made my day today:
* [Javascript Templates](http://www.trimpath.com/project/wiki/JavaScriptTemplates)
* [Fade Anything Technique](http://www.axentric.com/posts/default/7)
* [Node.appendChild()](http://www.mozilla.org/docs/dom/domref/dom_el_ref32.html)
I can’t say enough good things about [Javascript Templates](http://www.trimpath.com/project/wiki/JavaScriptTemplates). The idea is that you drop some HTML mixed with placeholders and some view logic in a hidden <textarea>. Then you mate the place holders with the template, and use your method of choice to drop the content into the page.
At first I cheated and used [innerHTML](http://www.mozilla.org/docs/dom/domref/dom_el_ref8.html).
But I quickly realized that if a user started filling out an added form element, then decided to add another, the unsaved work would be obliterated.
So I kind of cheated.
I create a semi-anonymous <div> with the DOM, which has its innerHTML set to the result of the rendered [template](http://www.trimpath.com/project/wiki/JavaScriptTemplates).
Then that <div> is appended to a container via the DOM.
I probably shouldn’t use the innerHTML property on my DOM-created <div>, but the whole “fill a [template](http://www.trimpath.com/project/wiki/JavaScriptTemplates) with placeholders” method resonates more with me than the “programatically create HTML” tradtional DOM method.
