Skip to content

24 ways to impress your friends

Edit-in-Place with Ajax

50 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

trovster

Nice little explaination. Prototype is pretty massive and daunting task if you don’t know JavaScript very well.

When I first looked into copying the Flickr experience I found this edit in place function, but it didn’t have the AJAX element.

In the end I made it up myself, it works, but probably not as well as this.

As for XML and innerHTML. FF1.5 now supports it when sending pages as XML. Good or bad, I haven’t yet decided.

Petar Pavlovic

I think the problem with this script is that text “Saving…” when you click on Save button should not replace editable content.

For example, I’ve edited content, then killed my Internet connection and click on Save. In the place of edited text I get “Saving…”. Because the Internet connection is broken (or Work Offline is selected on browser), next click on editable DIV brings me text “Saving…” to edit, and the previous content is lost.

Steve

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

Maud-Dib of Dune

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);

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.

xvrd

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…

Will Kelly

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.

db

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!

Drew McLellan

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

db

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.

Chuck Reynolds

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.

Drew McLellan

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

eli

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.

Kae Verens

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)

eli

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.

Gavin Laking

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 :-)

pietertje

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

Andrew

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

Dan Glegg

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.

Maarten Brands

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.

Fixe

function init(){

var max = 50;

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

makeEditable(‘item_’+i);}

}

it worked for me Andrew.

nice article !!

Andrew

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

Arnold Zanting

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

Alste

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)

Bruno

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

This way, it adds suport for quotes and foreign languages

Greg

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?

Lucas

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

Really interesting site.

to:Kae VerensWOW, your cms seems very cool, good job

Impress us

Be friendly / use Textile