Programming with Poise

jQuery and you. And me.

I’ve had a bit of a writers block lately. I thought it was due to the fact that I’d been too busy developing to think up things to write. And then I made a realization - the entire concept of a blog on computer science is to share my experiences; If I’m busy solving problems and writing code, then, necessarily, I have blog fodder. One of those moments where you rediscover something you already knew, in an entirely new light.

I’ve been getting pretty heavily into web development lately. Wrote my own web development abstraction system (I cringe to call it a “framework” because frameworks, by definition, are restrictive, and my goal here was to do as much heavy lifting for the web developer as I could, without stepping on their toes at any point), and more recently, wrote a jQuery plugin for myself called Superedit. I’ve really been loving jQuery. Really loving it. I would recommend it very highly if you’re looking to add any javascript to your site; jQuery makes web development a real pleasure.

As all of my project start, I got sidetracked. While writing a site for the Honors Program here at my school, I decided that I’d like to make all “edit” functionality on the site happen via an edit-in-place system.

Take a user account page for example. Say you want to change your contact email address. The form might look like so:

And when you click on the span, I use JavaScript to turn it into an input like so:

You edit the content:

And then, on JavaScript’s blur() or change() events, the content is saved via callback, and the input is turned back into a span:

Now, personally, I think this is one of the greatest toys Ajax has given us so far. The ability to edit (and validate) form input without having to reload entire pages for a single element to change. Of course, the first [working] iteration of this system spanned two disjoint JavaScript files, a php header, a php function file, and then more configuration in the markup itself. Now I’ve got it down into two plain jQuery methods. To initialize the element for display:

$( 'selector' ).superbox( 'initial value', callback, { options } );

And to initialize the element for editing:

$( 'selector' ).superinput( 'initial value', callback, { options } );

And the plugin handles the rest. The only tricky part has been getting the callback to behave itself, so I’m working on getting that stable. jQuery plugin generation is actually a pretty pleasant process. A good primer can be found directly from jQuery’s documentation, and once you’ve gone through that, an excellent practical demonstration can be found here.

I’ll probably be posting again soon on Superedit when I get it stable and formally add it to the jQuery Plugin list. If you want to add hover event handlers, use collapsible containers, Ajax, browser-dependent scripting, or, like me, you want to extend the already sprawling library and bend your XHTML to your will, javascript has never been easier.

… I think I should get paid for advertising.