heisel.org

A walk on the client side

Wednesday | April 20, 2005 | 5:23 pm  

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
• Fade Anything Technique
• Node.appendChild()

I can’t say enough good things about Javascript Templates. 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.

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.

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 with placeholders” method resonates more with me than the “programatically create HTML” tradtional DOM method.

Permalink | Comments (0) | Categories: Programming, Web design