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.
Here are the interesting bits from the example page:
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.