AJAX Edit In Place With Prototype

UPDATE Thu 29 Nov 2007 @ 5:30pm : The Edit In Place code has a new home at editinplace.org

UPDATE Wed 7 Jun 2006 @ 11:45pm : Before you get too attached to what is described here there is a new version you should look at: AJAX Edit In Place With Prototype, Version 0.2.0.

Late last year Drew McLellan posted a great article on 24ways.org called Edit-in-Place with Ajax. Using Flickr as an example and Prototype to do the heavy lifting he showed how to edit text inline. Like many other people I’ve been fascinated by this approach to altering text. After playing with Drew’s example off and on I finally sat down and decided to generalize it a bit more to make it easier to use.

Before I get into the code let me say that I’m a complete amateur when it comes to JavaScript. If you are looking for someone with serious JavaScript fu go talk to Simon Willison.

First go get a copy Prototype. Then you’ll need the Edit In Place javascript file. There is an example page that you can play with. I tried to make it as simple as possible while still providing a reasonable amount of flexibility.

Here are the interesting bits from the example page:

<style type="text/css">
.editable {
	background-color: #ffff99;
	padding: 3px;
}
.savebutton {
	background-color: #36f;
	color: #fff;
}
.cancelbutton {
	background-color: #000;
	color: #fff;
}
.saving {
    background-color: #930;
    color: #fff;
    padding: 3px;
}
</style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="eip.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', init, false);
function init() {
	makeInputEdit('editme', 'edit.php', 'editable', 50);
	makeTextEdit('bigedit', 'edit.php', 'editable', 15, 75);
}
</script>

<! – ... – >

<span id="editme">
This is just a one line title.
</span>

<p id="bigedit">
Dashing through the snow on a one-horse open sleigh, over the fields we go,
laughing all the way; bells on bob-tail ring, making spirits bright, what fun
it is to ride and sing a sleighing song tonight. Jingle bells, jingle bells,
Jingle all the way! O what fun it is to ride in a one-horse open sleigh. Oh!
Jingle bells, jingle bells, Jingle all the way! O what fun it is to ride in a
one-horse open sleigh.
</p>

The CSS classes are used to make a few things stand out. The editable class is to applied to elements that are editable (bet you saw that coming) when the mouse goes over it. When the mouse leaves the element the class is removed. The example above is similar to the style that Flickr uses. The savebutton and cancelbutton classes are applied to the save and cancel form buttons (I know, another big surprise) and the saving class is applied to the text ‘Saving…’ that is displayed while text is being saved.

After the CSS we pull in the Prototype and Edit In Place code. The Event.observe code will call the init function when the page is loaded. The init function in this case is used to call our makeInputEdit() and makeTextEdit() functions that specify which elements we want editable. The first three arguments to both functions are the same: 1) the id of the element to be made editable, 2) the page to call for updating the text and 3) the class to apply on mouse over to indicate to the user that the text is editable. The fourth argument for makeInputEdit() is the length of the input form field. The fourth argument for makeTextEdit() is the number of rows for the textarea form field and the fifth argument is the number of columns for the textarea.

There is an example edit.php with EIP that should be enough to get you started (this is the same example that Drew used):

<?php
    $id = $_POST["id"];
    $content = $_POST["content"];

    print(htmlspecialchars($content, ENT_QUOTES));
?>

Combined this with Prototype, the Edit in Place (EIP) code and the example page and you have enough to start playing with. Find ways to add it to your own apps and let me know if you find bugs or better ways of doing the same thing.

Now that you’ve read this whole thing don’t forget to look at AJAX Edit In Place With Prototype, Version 0.2.0.