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.

20 Comments

  1. 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.

  2. 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.

  3. 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.

  4. Tiddlywiki has had similar functionality for quite some time – might be worthwile to check it out:

    http://tiddlywiki.com/

  5. 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.

  6. I refresh the page after editing.
    it doesn’t save on the website.

  7. 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.

  8. very nice. Will try it to implement with one my customers.

  9. 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?

  10. 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.

  11. Hi there,

    This is a nice job. Can scripts do with simple click and enable more than one text field into editable fields?

    Cheers!

  12. 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.

  13. EditInPlace wasn’t designed with multiple edits in mind, so it would have to be completely reworked to support that.

  14. I want to Use Ajax Edit in Place for a Jsp Page.expalin me with an example
    Thanks

  15. 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

  16. Is there part of the code I need to eidt to enable it to save?

  17. Still cannot find a working example with WYSIWYG editor in edit-in-place…

  18. Completely awesome – I’ve really enjoyed working with EditInPlace.org :) Thanks!

  19. 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…

  20. Hi, im new to ajax but the script would be very useful on a site im designing, is it possible to password protect the edit text or perhaps have it on a password protected page but the effect is also on a live page..does that make sense?

    Bradz

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2014 Joseph Scott

Theme by Anders NorenUp ↑