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.
May 8th, 2006 at 9:37 am warpedvisions.org » Blog Archive » Example use of prototype.js
[...] May 8th, 2006 in Links An example of edit-in-place with prototype.js. Prototype is the excellent JavaScript library for hooking events and doing asynchronous HTTP. [...]
May 8th, 2006 at 10:57 pm Mislav
Why didn’t you start from Scriptaculous edit in place functionality and just enhance it? This way you’ve just recreated most of the things and didn’t show anything new. Sure I like the textbox, but once you have the rest (which we had) that’s just a small part.
Also I think you are using innerHTML too much (Prototype Insertion) where DOM methods could serve much better.
May 8th, 2006 at 11:53 pm joseph
I did try the Scriptaculous edit in place features but I found that it was harder to use than it needed to be and seemed to fail sometimes. Combined that with the additional overhead of Scriptaculous on top of Prototype and it seemed like more work that it was worth.
As for using innerHTML, guilty as charged. I’ll admit that I’m not fully versed on the whole DOM vs. innerHTML debate. From what I’ve been able to read innerHTML seems to be something of an accepted evil. If you have some patches to use DOM instead I’ll take a look at them.
May 9th, 2006 at 2:15 am Sudar
Well either I just found a slight glitch or my eyes are too sensitive.
First click the line to edit it. Click either save or cancel.
Then click the paragraph to edit it. Click cancel.
Both are highlighted.
May 9th, 2006 at 2:23 am wald
Tiddlywiki has had similar functionality for quite some time - might be worthwile to check it out:
http://tiddlywiki.com/
May 9th, 2006 at 5:16 am Rob
Could come in handy for some clients. There has to be a way to make it so the user has to login or have admin. access in order to edit the page. I wonder if anyone has come up with something like that.
May 15th, 2006 at 11:43 am bo
I refresh the page after editing.
it doesn’t save on the website.
May 18th, 2006 at 9:57 am san
Bo, that’s because the javascript by itself isn’t enough to save things. You need to have PHP running, so that it can save the changes. Javascript can’t modify other files, only PHP can.
June 1st, 2006 at 11:55 am Chris
very nice. Will try it to implement with one my customers.
June 1st, 2006 at 12:01 pm Chris’ Blog » Ajax: Edit In Place
[...] der Website von TAURUS SPORTS implementieren. -chris Diesen Post mailen keine Kommentare diesen Artikel trackbacken Kommentar zu diesemArtikel [...]
June 7th, 2006 at 10:37 pm Joseph Scott’s Blog » Blog Archive » AJAX Edit In Place With Prototype, Version 0.2.0
[...] It has been almost two months since my since the first version of Edit In Place (version 0.1.0). Since then I’ve been trying to beef up some my JavaScript foo. I also discovered some problems with code that needed to fixed. So today I’m releasing version 0.2.0 of Edit In Place (eip). Before I get into the changes in the new version go check out the new example.html page. Or go grab the 0.2.0 release file. [...]
June 9th, 2006 at 6:46 am branndon
I have installed it just how it is, however as mentioned before it doesn’t save. Is there part of the code I need to eidt to enable it to save?
June 29th, 2006 at 4:03 am Inviz
Hello there.
A bug: doubleclick brings you 2 forms
And the thing I want to inform you:
I rewrote your library (without any of my credits, They’re all yours) to be used with prototype.lite.js of moo.fx.js (http://mad4milk.net) - removed Observer, Insertion, Prototype.ajax (to moo.ajax), much boring stuff, etc.
http://inviz.ru/junk/eip/ here is a source and example page.
Thanks for your code, It rocks.
July 11th, 2006 at 10:34 am MondoBlog » Blog » Fast AJAX Links Collection - Num 1
[...] AJAX Edit In Place With Prototype [...]
August 8th, 2006 at 9:57 am khautinh
Hi there,
This is a nice job. Can scripts do with simple click and enable more than one text field into editable fields?
Cheers!
November 16th, 2006 at 9:20 am Mircea
Well, that works for one record. But what if I have more than one records to be edited in place (one after another…like a grid)?
How can I diferentiate which is which to be updated?? (for the example “You can edit this line with a single click.”)
Any ideas? Thanks.
November 16th, 2006 at 9:58 am joseph
EditInPlace wasn’t designed with multiple edits in mind, so it would have to be completely reworked to support that.
January 21st, 2007 at 8:57 pm sreenivas
I want to Use Ajax Edit in Place for a Jsp Page.expalin me with an example
Thanks
February 25th, 2007 at 10:44 am Julian On Software » AJAX Edit In Place With Prototype | Joseph Scott’s Blog
[...] AJAX Edit In Place With Prototype | Joseph Scott’s Blog “AJAX Edit In Place With Prototype” [...]
March 15th, 2007 at 4:50 pm The hunt for AJAX/WYSIWYG 'edit in place' « Matt’s Musings
[...] I found an article by Joseph Scott, a a few others like it, on edit in place functionality for a web page based on Prototype to produce almost the same behaviour as you get on Flickr. [...]
April 8th, 2007 at 2:55 am Stefan
I was playing with Edit in Place and I found maybe a small bug. When I am editing HTML content and I put it between .and. edit in place stops working. Can somebody help me to figure out why? Thanks
June 10th, 2007 at 11:56 am Rezon
Is there part of the code I need to eidt to enable it to save?
March 13th, 2008 at 9:44 am Design Shrine | AJAX SCRIPT RESOURCES
[...] AJAX Edit In Place With Prototype May 08, 06 Late last year Drew McLellan posted a great article on 24ways.org called Edit-in-Place with Ajax. Using Flick 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. [...]
March 25th, 2008 at 12:58 am Issyk-Kul Lake
Still cannot find a working example with WYSIWYG editor in edit-in-place…
March 28th, 2008 at 5:05 pm Tim
Completely awesome - I’ve really enjoyed working with EditInPlace.org :) Thanks!
May 15th, 2008 at 4:40 am bobjpg
Hi,
edit in place is marvelous ;-)
My problem is: i am trying to make it work with “autocompleter” from http://digitarald.de/project/autocompleter/
Prototype and Mootools have conflicts :-(
Does anyone ever done this?
Thanks a lot…