AJAX Edit In Place With Prototype, Version 0.2.0

Posted on June 7, 2006 by Joseph Scott

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

UPDATE Fri 30 Jun 2006 @ 8:20am : You can find the latest Edit In Place blog posts at http://joseph.randomnetworks.com/tag/editinplace

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.

Doing OO in JavaScript is a bit strange. Because of some other limitations I ended not making on Edit In Place class, instead there are several supporting functions prefixed with EditInPlace to try and avoid name space collisions. The 0.1.0 code didn’t deal with errors when a save attempt failed, that has been fixed in 0.2.0. Now when a save attempt fails the original text is put back and an alert in displayed indicating that the changes were able to be saved. Perhaps not the most elegant and certainly not the most flexible, but a reasonable start and much better than what we did before (which was worse than nothing).

There are some new default CSS names used:

.eip_editable { background-color: #ff9; padding: 3px; }
.eip_savebutton { background-color: #36f; color: #fff; }
.eip_cancelbutton { background-color: #000; color: #fff; }
.eip_saving { background-color: #903; color: #fff; padding: 3px; }

Making IDs editable have new function calls as well:

Event.observe(window, 'load', init, false);
function init() {
	EditInPlace.makeEditable( {
		type: 'text',
		id: 'editme',
		save_url: 'edit.php'
	} );
	EditInPlace.makeEditable( {
		type: 'textarea',
		id: 'anotheredit',
		save_url: 'edit.php'
	} );
}

The EditInPlace.makeEditable() function only requires the id and save_url, the type option defaults to text. There are plenty of other options you can set if you feel so inclined. Here are the defaults:

id: false,
save_url: false,
css_class: 'eip_editable',
savebutton: 'eip_savebutton',
cancelbutton: 'eip_cancelbutton',
saving: 'eip_saving',
type: 'text'

The css_class, savebutton, cancelbutton and saving are all CSS classes. The id is DOM id that you want to be editable. The save_url is the URL to call when saving changes. The type is the form type to use, right now this must be either text or textarea.

My JavaScript skills are still pretty basic so if you have some recommended changes feel free to drop me a note. You can find all of the example and release files at http://josephscott.org/code/js/eip/.

UPDATE Fri 9 Jun 2006 @ 1:30pm : I forgot to mention how size of the form fields work in this new version.

67 thoughts on “AJAX Edit In Place With Prototype, Version 0.2.0”

Pingback: Joseph Scott’s Blog » Blog Archive » AJAX Edit In Place With Prototype
Pingback: warpedvisions.org » Blog Archive » A Prototype.js edit-in-place example
Pingback: GlitchNYC » Blog Archive » links for 2006-06-09
Anders Rasmussen on June 9, 2006 at 12:31 am said:

Sweet,

I was just wondering, the following seems a bit redundant ..

function init() { EditInPlace.makeEditable( { type: 'text', id: 'editme', save_url: 'edit.php' } ); EditInPlace.makeEditable( { type: 'textarea', id: 'anotheredit', save_url: 'edit.php' } ); }

What are the chances of putting the ID’s in an array or something similar? The current solution is not that elegant once you exceed a number of EditInPlace elements, perhaps something like; id: ‘editme, editme2, editme3, someotherid, editmetoo’, ..

In any case, nice write-up – very inspiring.

a.

Reply ↓
joseph on June 9, 2006 at 12:37 am said:

Taking a list of ids would work if they all were for the same type of edit and used the same save_url. When I was working on this I figured that most people would want the ability to customize each editable id more than doing the same thing over and over.

If nothing else a simple wrapper function would allow for what you described.

Reply ↓
Jeff on June 9, 2006 at 4:56 am said:

Nice job. I like the usability of normal-looking text becoming editable with a click.

In Firefox, the editing caret disappears when the text becomes editable. Any way to restore it?

Reply ↓
Axman6 on June 9, 2006 at 5:38 am said:

Is it just me, or is this the perfect thing for wiki’s? stick this on wikipedia, and it’ll just fly agone (not that it isn’t already, but faster maybe :s)
Anyway, cya.
Al.

Reply ↓
Keith on June 9, 2006 at 5:40 am said:

That’s great piece of code. Is it possible to add authentication to it, such that only authorised users can edit the page?

Reply ↓
Rob on June 9, 2006 at 5:43 am said:

I was looking for an edit in place that requires the user to be logged in as an administrator in order to be able to edit in place and save it. Is it possible with yours?

Reply ↓
Guto on June 9, 2006 at 6:09 am said:

Very interesting… But I have some sugestions…

How about not one but 5 editinplace elements in your lib?
EditInPlaceTextField (need for 1 line text)
EditInPlaceTextArea (that one that you just did)
EditInPlaceCombo (combo box get from an xml)
EditInPlaceComboAutoComplete (using the autocomplete from prototype lib)
and finally
EditInPlaceCheckBox (true or false parans)

That would be very interesting…

But it’s already good the way it is!

Reply ↓
falcon on June 9, 2006 at 6:38 am said:

I can’t tell from the description here, I think it will be very useful to have such a component which doesn’t communicate with the server. A component which only changes the DOM (so save would confirm the change, ‘cancel’ would revert back to whatever existed before). This will be helpful for those of us who need to have our users change many things before saving them all together ourselves.

Reply ↓
Rich Waters on June 9, 2006 at 6:45 am said:

Not bad for a simple example. There is one build into scriptaculous that is a bit more feature rich. Check out the controls.js file in scriptaculous to see their implementation.

Reply ↓
Kevin on June 9, 2006 at 7:19 am said:

AWESOME!!! Thanks for this! I’ve been building a very simple validator for a CSV file and needed to have something like this so that when problem data is displayed in a HTML table, they can click on it and edit it.

I need to integrate a prepopulated select list as one of the formField types. When I get the code worked out I’ll send it to you!

Thanks again for this!

Kevin

Reply ↓
Michael Williamson on June 9, 2006 at 8:59 am said:

If you double click very quickly on it, two text areas with appear (in your example). If you tripple click very fast, you can get three!

Reply ↓
Sean O on June 9, 2006 at 10:01 am said:

Anders,

My thoughts exactly.

I threw together a modified version of this script, using an array to populate each id. Add or subtract as many as you like, the script will create a text file with that id’s name, or update if it already exists.

http://home.comcast.net/~rhyno2000/editinplace_v021.zip

Reply ↓
Pingback: Joseph Scott’s Blog » Blog Archive » Edit In Place: Size Of Form Fields
Pingback: Ã£Ã?Ã¦Ã¤Ã ÃÃ¡Ã?ÃÃÃ¦Ã Ã¤Ã
Pingback: Gobble Gobble » AJAX Edit In Place With Prototype, Version 0.2.0
Pingback: Bloggitation » links for 2006-06-10
Pingback: SitePoint Blogs » links for 2006-06-09
Pingback: The Exile » links for 2006-06-10
Pingback: Dee’s-Planet! » AJAX Edit In Place With Prototype, Version 0.2.0
Ivo Jansch on June 10, 2006 at 8:33 am said:

We use a similar technique in epointment.com, when editing epointments; also using prototype. The hardest part has been making the editor mode look exactly like readonly mode, which almost succeeded except for multiline textarea’s. I’ll see if I can make this script available.

Reply ↓
Mr.Ale on June 10, 2006 at 10:19 am said:

How to use bd mysql, i am amateur…

Reply ↓
Pingback: anandsueman.com » Blog Archive » Some usefull items
acedanger on June 12, 2006 at 7:00 am said:

Can you put two fields side by side and make each of them inline edittable? What I found, from my own experience, was that each EIP field had to be on it’s own line, unless you use a table. If you use a table, you can’t use most of the effects from the prototype framework. I found the inability to do this frustrating to say the least.

Reply ↓
Pingback: BlueSparc design, technology news » Blog Archive » AJAX Edit In Place With Prototype, Version 0.2.0
Pingback: links for 2006-06-11 at Bjtitus.net
Elliott Cable on June 12, 2006 at 10:49 am said:

Is it just me, or is this the perfect thing for wiki’s? stick this on wikipedia, and it’ll just fly agone (not that it isn’t already, but faster maybe :s)
Anyway, cya.
Al.

That’s exactly what I am doing. I am busy trying to integrate this into section editing for MediaWiki *right now* – if you are interested in helping, you can e-mail me me (elliott@starcolon.com).

Reply ↓
Pingback: andy brudtkuhl » Blog Archive » links for 2006-06-12
Pingback: Some Random Ajax Links from around the Web | Ajax Blog
Pingback: Joseph Scott’s Blog » Blog Archive » Edit In Place: Version 0.2.1
Pingback: COLD CASE » Blog Archive » AJAX Edit In Place With Prototype, Version 0.2.0
Pingback: The WP Themes » AJAX Edit In Place
Pingback: Quick Link: Ajax Edit in Place using Prototype - davecentral Planet David Central & Dave Central Planet
Ivo Jansch on June 30, 2006 at 1:03 am said:

The script we had for epointment.com, which I mentioned in comment 23 above, is now available here:

http://www.epointment.com/software/eeip

Joseph, perhaps we can see if we can combine forces?

Reply ↓
Pingback: » Some interesting and useful AJAX/Javascript code
John on July 15, 2006 at 8:17 pm said:

How would you go about doing this if you wanted to edit a whole table row’s worth of fields that might be made up of a variety of different form fields? Like instead of hovering over each individual item, you have a link at the end of the row that says edit which then brings up form fields for the whole thing?

Reply ↓
karthi on July 25, 2006 at 6:31 am said:

how to execute the php files with the ajax prototype1.4.0?

Reply ↓
Tim Harper on August 2, 2006 at 12:03 pm said:

Jeff,
I’m getting the same exact problem. It’s very annoying, I’ve worked hard to find a work around but haven’t found anything yet.

Tim

Reply ↓
Tim Harper on August 12, 2006 at 7:06 pm said:

Jeff,
I’m getting the same exact problem. It’s very annoying, I’ve worked hard to find a work around but haven’t found anything yet.

Tim

Reply ↓
Pingback: Programming » AJAX Edit In Place With Prototype, Version 0.2.0
bratwurstler on September 9, 2006 at 3:43 am said:

works perfectly. thank you =)

Reply ↓
Alex on October 5, 2006 at 12:32 am said:

I have started to put together a wiki about Prototype. Sergio Pereira’s documentation is wonderful, but this way everyone can contribute to the documentation. It would be much like the annotated PHP help downloadable from php.net.

Have a look at http://www.formar.se/prototype

Reply ↓
Pingback: Prototype.js Documentation » Edit In Place With Prototype
Myrian on October 16, 2006 at 10:48 pm said:

is it possible to use WYSIWYG editor like tinyMCE in edit?

Reply ↓
Sam on December 3, 2006 at 8:29 am said:

Hi, is it possible to add authentication to that code?

Reply ↓
SumpyGump on December 3, 2006 at 9:08 pm said:

There is an error in the file:

This:
// Complete the failed AJAX request.
EditInPlace._saveFailed = function(id, t) {
var id_opt = EditInPlace.getOptionsReference(id);

Should be changed to this:
// Complete the failed AJAX request.
EditInPlace._saveFailed = function(id, t) {
var id_opt = EditInPlace._getOptionsReference(id);

This is a really cool thing. Great work!

Reply ↓
Sumpygump on December 6, 2006 at 9:00 pm said:

Also, I think this is helpful for textarea edits:

Change the following line:
field += ‘>’ + id_opt['orig_text'] + ‘\n’;

to this:
field += ‘>’ + id_opt['orig_text'].replace(//g, “”).replace(//g,”") + ‘\n’;

This way when the end user is editing the content, it will not have the html br tags in there, which it probably didn’t in the first place when they typed it. It depends on the situation of course, like if the textarea contains html.

Just something to throw out there.

Reply ↓
Richard S on December 29, 2006 at 6:15 pm said:

Works great … can I implement it in my site?

Reply ↓
Lorenzo on February 8, 2007 at 11:58 am said:

Stupid question. If I have many records to editinplace into the same page?
I have 4 record with the same fields
1) id1 Name Surname Address Phone Email
2) id2 Name Surname Address Phone Email
3) id3 Name Surname Address Phone Email
4) id4 Name Surname Address Phone Email

I must change the funcion? Is it possible?
Thanks a lot!
Lorenzo

Reply ↓
Pepo on March 23, 2007 at 5:52 am said:

Hi! I’m new on AJAX… Basic question (I think!)

In the index.html I have EditInPlace.js and prototype.js definition and works well (only in the firs page). I think because Event.observe(window, ‘load’, init, true); put listeners only in this window.

After I call with AJAX a code to put in a DIV layer new fields, and there EditInPlace don’t run, in this new fields.

Somebody say my to work with IFRAME, but i don’t like.

Has anyone a example to include in dinamic AJAX source an makeEditable() call, because I try a lot of things but it can’t run!

Thank’s for all!

Reply ↓
Jean on June 13, 2007 at 1:58 pm said:

Great work, however there should be some kind of authentication. Is this planned in next version? Thanks

Reply ↓
Sascha Leib on June 17, 2007 at 1:39 pm said:

This looks great, and in fact much better than the one from Script.aculo.us.

My only problem is that I can’t find a smooth way to send errors back to the user (stuff like “the database is down, please try again later”…)

Any ideas?

/sascha

Reply ↓
Waldemar on August 23, 2007 at 3:23 pm said:

Hi!

I was wondering if you could add a smiliar to “Click to edit” in your previous version of AJAX Edit In Place?

It was in the old version (0.3.3 http://josephscott.org/code/js/eip/example.html) and it would be so cool if you could add it in this version or in the following version.

Many thanks for a wonderful script!

//Waldemar

Reply ↓
Tom on August 23, 2007 at 11:13 pm said:

This might be a bug.

I cant seem to save the data when on_blur: “cancel”

Reply ↓
Tom on August 23, 2007 at 11:29 pm said:

onblur: “save” doesn’t work either

Reply ↓
walter on September 6, 2007 at 8:00 am said:

For me it’s perfect.
I just need to know how to setup the connection to my database (sql)

Where is the part of the code to do that, so that i can set up the connection to my database

thanks

Reply ↓
walter on September 6, 2007 at 1:57 pm said:

This line:

// Store the current (original) value of the editable id.
id_opt['orig_text'] = $(id).innerHTML;

in editInPlace.js

DOES NOT WORK IN SAFARI

Reply ↓
Pingback: kerry webster » Blog Archive » AJAX Application Reference
Pingback: 40 Useful AJAX Applications - UltraFREE.net
siera on January 7, 2008 at 3:57 pm said:

Need some help. wondering if anyone can help me.

I want to change something on my bebo. i know how to edit it and get it to the way I want. the problem is when i refresh the page it goes back to normal and everything i’ve edited disappears. is there anyway i can save it the edited way so that when its viewed by anyone it shows up the edited way?

any help is much appreciated. drop me an email at siera21.x@hotmail.co.uk

Reply ↓
Joseph Scott on January 9, 2008 at 2:18 pm said:

@siera -

I’m not familiar with bebo, your best bet is to contact them and ask for help.

Reply ↓
Emerald on February 5, 2008 at 6:44 pm said:

Hi Joseph,

this is awesome! Thanks heaps for it. Only one thing, I have a mysql database and use php.
How do I get it to update the database?? Im a novice. Thanks heaps

Reply ↓
Pingback: Brandon Quintana » Blog Archive » AJAX Edit in Place With Prototype
Pingback: AJAX Unplugged! « KoshysHome.COM
Pingback: in place editing di ruby on rails « dimas priyanto

Joseph Scott – RETIRED

AJAX Edit In Place With Prototype, Version 0.2.0

67 thoughts on “AJAX Edit In Place With Prototype, Version 0.2.0”

Leave a Reply Cancel reply