heisel.org

A walk on the client side

Wednesday | April 20, 2005 | 5:23 pm  

I’m nor­mally a server side guy, at least when it comes to pro­gram­ming. But a recent project at work gave me a chance to work on some simple DOM scripting.

Another pro­gram­mer was work­ing on a form and in look­ing over the UI I said we needed to have the option for mul­ti­ple authors or edi­tors to be assigned to a blog. His first thought was to add a wizard asking “How many authors/editors would you like?” After answer­ing that, you would then be taken to a page with the pro­scribed number of fields.

I hate wiz­ards! Hate them, hate them, hate them!

That’s harsh, and I know they have some good uses.

For most tasks that our pro­duc­ers 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 acco­mo­date their needs. Enter client-​side scripting!

So here are the technologies/techniques that made my day today:

• Javascript Tem­plates
• Fade Any­thing Tech­nique
• Node.appendChild()

I can’t say enough good things about Javascript Tem­plates. The idea is that you drop some HTML mixed with place­hold­ers and some view logic in a hidden <textarea>. Then you mate the place hold­ers with the tem­plate, and use your method of choice to drop the con­tent into the page.

At first I cheated and used inner­HTML.

But I quickly real­ized that if a user started fill­ing out an added form ele­ment, 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 inner­HTML set to the result of the ren­dered tem­plate.

Then that <div> is appended to a con­tainer via the DOM.

I prob­a­bly shouldn’t use the inner­HTML prop­erty on my DOM-created <div>, but the whole “fill a tem­plate with placeholders” method res­onates more with me than the “programatically create HTML” trad­tional DOM method.

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