• 1
• 2
• 3
• 4
• 5

ajax applied archive argument background bells blog call cancel class click code color comments dom edit editable eip entries feed field form horse http init innerhtml javascript jingle joseph june line mouse open page php place pm prototype ride save scriptaculous tags text title version website

Keyword Cloud Navigation Map

UPDATE Wed 7 Jun 2006 @ 11:45pm : Before you get too attached to what is described here there is a new version you should look at: AJAX Edit In Place With Prototype, Version 0.2.0.

Late last year Drew McLellan posted a great article on 24ways.org called Edit-in-Place with Ajax. Using Flick as an example and Prototype to do the heavy lifting he showed how to edit text inline. Like many other people I’ve been fascinated by this approach to altering text. After playing with Drew’s example off and on I finally sat down and decided to generalize it a bit more to make it easier to use.

Before I get into the code let me say that I’m a complete amateur when it comes to JavaScript. If you are looking for someone with serious JavaScript fu go talk to Simon Willison.

First go get a copy Prototype. Then you’ll need the Edit In Place javascript file. There is an example page that you can play with. I tried to make it as simple as possible while still providing a reasonable amount of flexibility.

Read Full Tutorial...