A walk on the client side

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.

About Chris

Python developer, Agile practitioner trying desperately not to be a pointy haired boss.
This entry was posted in Programming, Web design. Bookmark the permalink.