Tuesday, December 27th, 2005
Edit-in-Place with Ajax
Category: Articles
Drew McLellan posted day 24 on 24 ways to impress your friends.
His topic was Edit-in-Place with Ajax, which of course is when you can click on certain areas, and they change in front of you to be editable text boxes (or inline editable divs).
The tutorial goes over:
- The HTML and CSS
- The events required to manage
E.g.
function makeEditable(id){ Event.observe(id, 'click', function(){edit($(id))}, false); Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false); Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false); } - Saving the changed via Ajax
- Server Side
And, he ends with limitations:
There are a few bits and bobs that in an ideal world I would tidy up. The first is the error handling, as I’ve already mentioned. The second is that from an idealistic standpoint, I’d rather not be using
innerHTML. However, the reality is that it’s presently the most efficient way of making large changes to the document. If you’re serving as XML, remember that you’ll need to replace these with proper DOM nodes.It’s also important to note that it’s quite difficult to make something like this universally accessible. Whenever you start updating large chunks of a document based on user interaction, a lot of non-traditional devices don’t cope well. The benefit of this technique, though, is that if JavaScript is unavailable none of the functionality gets implemented at all – it fails silently. It is for this reason that this shouldn’t be used as a complete replacement for a traditional, universally accessible edit form. It’s a great time-saver for those with the ability to use it, but it’s no replacement.
It doesnot work in IE6
@John: Works perfect here.
Heres one that works cross-browser:
http://www.nikhilk.net/AtlasInPlaceEditSample.aspx
I verify it worked in IE 6.
Previously, I just browse to live example provided by the article
http://24ways.org/examples/edit-in-place-with-ajax/
It give javascript error. So, that’s why I think it is now working
This is a great site!
Good work keeps it up!
since this edit in place use prototype. It will cause problems and conflict with others javascript array.
here is the detail
http://blog.metawrap.com/blog/CommentView,guid,42b961d5-b539-4d9a-b1e0-108e546ae3e6.aspx
Not bad. I’ll give it a try.
Very nice, but does anyone have a sample of the “Sever side” code using ASP?
Well, that works for one record. But what if I have more than one record to be edited in place (one after another…like a grid) and I want to edit the third for example??
How can I diferentiate which is which to be updated??
Any ideas? Thanks.
Mircea – that’s what id (#) was invented for. Assign them, pass them around between functions, and make your element.update calls on them.
Try to write a word in “citation” and see what is saved… I would like to know how that problem is fixed…