It was only a matter of time before libraries emerged to make use of XMLHTTPRequest increasingly transparent to web developers. Jesse Garrett’s coining of the term ‘AJAX’ (Asynchronous JavaScript + XML) seems to have quickly caught on, and last night Anil posted on ProNet about a PHP toolkit called SAJAX.

SAJAX is a nice first generation library. It allows the developer to register functions in their PHP and then produces javascript to allow the resulting page to make use of those functions. It’s lightweight (146 lines) and easy to use. The key thing that’s missing at the moment are a couple of wrappers that would allow it to integrate with templating systems — the only output functions print the javascript directly.

I’m wondering how long it’ll be before we start to see libraries that help build complete UIs based around the AJAX approach; building classes similar to those of DB_DataObject_FormBuilder and automatically enabling AJAX behaviours for the updates. That would certainly allow for rapid development of interesting applications.

UPDATE: I’m told that version 0.6 of SAJAX will offer some wrappers to return the javascript into variables. That version is due on Monday, and will also include a perl module.

Recommend this post:

I’m doing a little work building a page editing tool for a CMS. Each page can have a number of different types of elements and I’ve decided that blocks of text will be controlled using FCKEditor. Rather than having a number of FCKEditor instances on a page I wanted to allow the user to be able to click on a button to instantiate an FCKEditor instance and move the text into it. After a little thought, it turned out to just require a pretty simply bit of javascript:

	function switchElement(div_id, text_area_name) {
		var our_div = document.getElementById(div_id);
		thetext = our_div.firstChild;
		var textarea = document.createElement('textarea');
		textarea.setAttribute("id", text_area_name);
		textarea.setAttribute("name", text_area_name);
		textarea.appendChild(thetext);
		our_div.appendChild(textarea);
		var oFCKeditor = new FCKeditor(text_area_name);
		oFCKeditor.BasePath	= '' ;
		oFCKeditor.ReplaceTextarea();
	}

This will convert a block of text contained within a ‘div’ element with a given ID to be converted into an FCKEditor instance. It’ll be pretty trivial to develop this to create the whole form. The next step will be to use XMLHTTPRequest to allow the editing to take place inline.

In the process I noticed that the FCKEditor manual implies that when instantiating the FCKEditor object with:

var oFCKeditor = new FCKeditor(text_area_name);

the user should specify the textarea’s id attribute, but in fact it requires the element’s name attribute.

NB: Only tested in Firefox.

Recommend this post: