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.

Check out a live example

Related Content:

  • Ajax Tutorial
    Ajax, short for Asynchronous Java and XML, has allowed developers to create interactive Web pages with rich interfaces. Rich Internet applications...
  • Handling XML with Ajax
    This chapter discusses how to create an XML document in...
  • Getting started with Ajax
    Ajax techniques allow a website to update content and process a user request without requiring the page to fully reload. If you're completely new to...
  • Ajax apps with DWR
    A newly released podcast covers Ajax and Direct Web Remoting (DWR) including inside tips on using the Java open source library. It also covers common...
  • Simplifying Ajax with Spry
    Simplifying Ajax development using the Spry framework is explained in an article, by Paul Gubbay, a director of engineering at Macromedia, which is...

Posted by Dion Almaer at 8:43 am
11 Comments

+++--
3.6 rating from 33 votes

11 Comments »

Comments feed

It doesnot work in IE6

Comment by John — December 27, 2005

@John: Works perfect here.

Comment by Dextro — December 28, 2005

Heres one that works cross-browser:
http://www.nikhilk.net/AtlasInPlaceEditSample.aspx

Comment by Steve — December 28, 2005

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

Comment by John — December 28, 2005

This is a great site!

Good work keeps it up!

Comment by Sale — January 3, 2006

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

Comment by John — February 12, 2006

Not bad. I’ll give it a try.

Comment by Anonymous — February 18, 2006

Very nice, but does anyone have a sample of the “Sever side” code using ASP?

Comment by Werner — July 25, 2006

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.

Comment by Mircea — November 16, 2006

Mircea – that’s what id (#) was invented for. Assign them, pass them around between functions, and make your element.update calls on them.

Comment by Ben — May 16, 2007

Try to write a word in “citation” and see what is saved… I would like to know how that problem is fixed…

Comment by Seka — October 16, 2007

Leave a comment

You must be logged in to post a comment.