Ajax’d!

I’ve finished the first part of a web app that is used by our staff to manage our products, specifically item descriptions, features and specifications. One of our number complained that the current implementation – built on the very fine – is too damn slow.

And it really is slow. But that’s mostly because we do a post and refresh … every time we change something. Worse, I have 4 instances of the editor (!) for the four separate sections (description, item includes, features and spec chart).

How did I let this happen? How had it come to this? I dunno. Don’t ask me.

Inspiration

A couple of months ago I’d toyed a bit with Ajax to put together a fairly simple catalog ordering interface: https://www.uniquephoto.com/xm.php

(note you have to be a registered member of our site to see it, it’s – you guessed it – (Beta)ware).

I know I’m late to the Ajax party. So bear with me if I’m a little like the kid next door that just “discovered” Led Zeppelin.

So a version of this ordering interface seems to be working pretty well for our wholesale customers (different site). I thought, well, maybe time’s come to Ajax us a better back end for product management.

The Pieces

I came across Ekit, a Java applet. I didn’t let the fact the the demo didn’t work daunt me. Download was quick and painless and the included demo HTML worked pretty well and quickly, too. Documentation was a bit light, and the comments in code appear to be in German. But it worked, and had a getDocumentBody method that I could access from Javascript.

(Sidebar: I just can’t get over how damn cool that is: Calling a java method from javascript.)

I updated my Sajax toolkit from modernmethod.com. This code makes me nervous. Code that writes its own code always makes me nervous. I’m afraid it will become self-aware.

I already had the MySQL database and apache server, so we were all set!

Some Code Concepts

The editor applet exposes 2 methods that I needed to make it all work:

getDocumentBody the editor’s treats each document it works on as an individual html page – that is, it adds <html><head> etc tags. But this method will deliver only the html between <body> and </body>.

setDocumentText a way to get the information from my database into the text editors view pane.

Given a <textarea> called TextViewer in a <form> called ekitForm here’s how I get text from/ put text into the Ekit applet:

function getText()
{
document.forms["ekitItemForm"].TextViewer.value
= document.applets["Ekit"].getDocumentBody();
}

function putText(someText)
{
document.applets["Ekit"].setDocumentText(
document.forms["ekitItemForm"].TextViewer.value );
}

That’s the heart of it all, right here. Remember I had four distinct database fields: description, includes, features and specifications. I handled this by create 4 hidden input fields in my form. When I read from the database, I assigned the 4 hidden fields, and simply used the getDocumentBody and setDocumentText methods to switch between them.

Neat stuff!

Facebook comments: