eli, make sure you download the other files in the include:

http://24ways.org/examples/edit-in-place-with-ajax/editinplace.css

http://24ways.org/examples/edit-in-place-with-ajax/prototype.js

http://24ways.org/examples/edit-in-place-with-ajax/editinplace.js

Awesome! Love it, love the well thought explanation; very consise and very readable and ultimately lowers the hurdle more than any others on AJAX which myn eyes have read today or previously.

I do NOT like/use/no PHP, but dig how it can be used in place of ActiveX for posting w/o refresh – which is the ultimate end game issue. Do you have any excellent redirections to how-to w/o PHP?

Here are typos:

1) make:

“The function madeEditable() attaches the mouseover…”

should say:

makeEditable instead of madeEditable.

2) , false

“Event.observe(obj.id+’_cancel’, ‘click’, function(){cleanUp(obj)}, false);”

should have a ”, false)” parameter in the call to cleanUp as in:

Event.observe(obj.id+’_cancel’, ‘click’, function(){cleanUp(obj,false)}, false);

Thanks so much for this!

I needed it for a project, and I was trying to figure out the most efficient way to go about solving the problem.

Cheers!

Incredible example. Thank you so much for this.

Great Tutorial. This is JUST what I was looking for in my next project!

Cool stuff Drew. This reminds of PPK’s edit in place idea for a CMS…although, he never actually did anything with it except save the changes into the DOM memory. This…actually does something! Great work man.

Too good. Very nice article and neatly explained. thats really of u.

wow.. great idea.

cÔÔl !

I think you need to CSS-style the TextArea though, so that in place editing isn’t too confusing (i.e. clicking a word and then needing to go up or down a line, depending on the new layout to change it).

You are mentionning finding a way to Highlight the fact you did change something, but the font switch is too much a change, I think.(as seen with FireFox 1.5 at least)

I definitely think we should find an idea to pursue this ‘Impress your friends’ serie beyond the 24th.

found some very cool tutorials on this site. thanks for all the work you put into this! the question is though… what happens on the 25th? is all that wonderful content just going to disappear? or are you maybe planning on zipping all the tutorials and sample files up into one handy package for people to download? enquiering minds want to know…

Good tutorial. I recently got inspired by Flickr too, to do a similar thing in a CMS.

One thing that could be done to improve it is to hook it into a form. For instance if it was a text input field not a textarea (i.e. for a title) pressing return would automatically submit without having to do extra coding. It could also be a fall-back if the ajax call failed or wasn’t supported in a particular browser.

Thx Drew – this is probably the best christmas gift for all of us :-)

Merry Christmas

ooohh this is sweeet! thank you!

..and yes, Merry Christmas!

pretty cool! i was wondering, say i wanted to run the cleanup function just by clicking outside of the textarea, how would i go about that. i tried attaching to the body tag, but i couldn’t get it to work… thx!

db: You may wish to rethink your goal. What would happen if a user clicked outside of the edit box part way through making an edit? (e.g. they may be switching between windows, copying and pasting from elsewhere).

that’s true, but i wouldn’t use it for large amounts of text. more like titles or tags, as in flickr or del.icio.us… but that’s a good point.

I’d like to see “nl2br” integrated and html as well.

You know what would really be cool, integrate TinyMCE or FCKeditor into the edit screen – that would rock.

Good job though – nice exp.

xvrd: I have no plans to remove any content published here this month. All the URLs can be considered permanent. (If I do reshuffle for whatever reason, I’ll make sure the links keep working).

You can also use the Ajax.InPlaceEditor that is from http://script.aculo.us that simplifies some of this…

Once again thanks for the great article!

Thanks for the great tut, cant seem to get the function to saving the text at all, where does the php go?

is there anyone with a working version of this that has their source code that i could some how download? i have done this tutorial about 3 times now and NOTHING on it is working. i’m an experienced mysql/php web designer but new to this whole ajax thing and just trying out some demos here and there. i got the other ajax demo to work just fine, but all this one does is display a title and a paragraph and nothing is editable or changes colors on mouse over or anything. any help? thanks.

Interesting tutorial – I’ll have to give it a try.

eli, I have a working example of something similar to this in my own cms. goto the admin area, log in as “demo” “demo”, click “pages”, then “sample events page”. you can edit the news easily by simply clicking on what you want to change. it also has a wysiwyg built-in (fckeditor)

kae verens, i checked your example, and it seems to be working as you said, but do you have a working example of THIS TUTORIAL? i need to take a look at the source file and see what is wrong with mine. anyone else have any help? did you get this tutorial to work? thanks.

eli: Err, but there is one right here on this site.

I got it working, although I decided to use className instead because it was a list of stuff I wanted editable.

Great job. Made my life a bit easier.

function init(){

var max = 50;

for (i = 1; i lt= max; i++){

makeEditable(‘item_’+i);}

}

Replace lt with the less-than symbol. Use this in place of the existing init() function in editinplace.js for those multiple item pages you have; dynamically generated of course :-)

There are several components for JSP

in Coldtags suite http://www.servletsuite.com/jsp.htm

that provides the same

Thanx a lot!

I’ve added:

document.getElementById(obj.id+'_edit').focus();

at the end of the edit-function to focus on that field, maybe handy for other users..

I try replacing function init() for a page with multiple items with:-

function init(){

var max = 50;

for (i = 1; i lt= max; i++){

makeEditable(‘item_’+i);}

}

but when i run the script i get the error “expected ’;’ on line 7” which equates to the “for” line.

Does anyone have any ideas or suggestions as to whythis doesnt work?

Thanks, Andrew

Great article! I’m currently working on a project that needs some inline editing – however, there’s an additional kicker in that some editables are not text-only. Within the rails app, the editor needs to support custom “read” and “write” partials to dump into the editor form.

I’ve implimented it using a regex to properly escape any quotes in the partials and dumping them into the onclick call on the editable element.

Early days yet but so far it looks like this:

http://files.angryamoeba.co.uk/crap/tails-editors.png

couple of points:-

1. I’m using position: absolute because some editable elements are in small screen areas that will not contain a form in a presentable manner.

2. I’m fading down the opacity on the edited element for additional feedback.

Hope that’s of use to someone out there. Keep up the great work with this site.

It’s a super article! I have it working, but I’m busy to implement TinyMCE or FCKeditor, but it don’t work. Could somebody explain me, how I make it? Sorry for my bad english.

function init(){

var max = 50;

for (i = 1; i < max; i++){

makeEditable(‘item_’+i);}

}

it worked for me Andrew.

nice article !!

Please could someone email me a working copy of the files to allow editing of mutliple items ‘made editable’ via the finction discussed above.

Please send to andrew[dot]bean[at]gmail.com.

Thanks in advacne,

Andrew

First of all, GREAT SCRIPT!!

I got it working with multiple items. The only thing I want to do is send an extra id to the edit.php file. So I can use it to update a single row in a mysql database.

Someone got an idea?

Greetings Arnold

Indeed this is a great tutorial although one of some problems is apparent. For example, after editing content and clicking on “Save”, you get text “Saving…” which is also editable (!!) whereas it shouldn’t be. Can you fix that? (I’m talking about your example page)

Best edit-in-place tutorial I’ve seen yet. Nice work.

I would change htmlspecialchars($content) for stripslashes(htmlentities($content))

This way, it adds suport for quotes and foreign languages

GAh! This is soo cool but I don’t know any php so I have no idea how to actually save what I modify. Could somone post or e-mail a php script/method that will allow me to save changes?

Had tested it in Zope, and works like a charm!

Really interesting site.

to:Kae Verens – WOW, your cms seems very cool, good job