ColdFusion and AJAX Edit In Place

Earlier this week I created a project that had a very basic CMS administration area - this consisted of updating the status of a car (whether it’s available or sold) and also the ability to change the car’s price.

Having recently fallen in love with Flickr I thought it would be great to have a Flickr-like ability when editting the prices - i.e. click on the price and it becomes a form field which allows you to update the price without refreshing the whole page.

So, after much research I’ve managed to implement this with the help of the Prototype Javascript Library and Joesph Scott’s Edit In Place add-on.

Here’s a screenshot to give you an idea of what I mean:

Edit In Place example

I’ve also packaged a simple example of this technique - but taken one step further; all the database records (except for the ID) are edittable. This should give you plenty to sink your teeth in.

Download cf_editinplace.rar file or Download cf_editinplace.zip file

Update: the above archives now include a debug form. That’s one of the joys of AJAX is trying to debug the application. Hopefully the debug form will make this a little easier.

I welcome your comments.

This entry was posted on Friday, August 4th, 2006 at 10:37 pm and is filed under Ajax, ColdFusion. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

16 Comments
Feel free to contribute.

On August 7, 2006 at 11:16 am Matt Gifford wrote:

It’s a nice slick front-end, Neil.

I have been thinking about doing something like this for a CMS I’ve been working on. Well done! :)

On August 7, 2006 at 5:14 pm Neil wrote:

Glad you can find some use for this Matt.

On August 8, 2006 at 3:04 pm Emilie wrote:

This is exactly what I was looking for! I installed your code but I am running into one problem. When I edit and click save the icon spins and never stops. The change is never saved. Any tips on how to troubleshoot?

On August 8, 2006 at 4:21 pm Neil wrote:

The easiest way to debug this example is to create a simple form that submits to the update page. You could make the form to get one of the record’s items (e.g. title) and then simply submit the form to the update page.

I’ll create one when I get 5 mintues and upload it to the post.

On August 10, 2006 at 1:54 pm Emilie wrote:

Thanks Neil. I got it to save data. There was an issue with the database possibly because I’m running under BlueDragon .NET.

I have another question for you though…
After the changed data is save only the saved value is displayed. The rest of the form dissapears. Is this correct behavior? I’d like it to just update the value that was changed and everything else remain so users can continue to edit.

On August 10, 2006 at 10:15 pm Neil wrote:

I’ve not tested this on BlueDragon, so I wouldn’t know if there were any issues.

The way the index.cfm page should work is it should load the three default entries and make the title, content and date editable regions. When you click on any of these regions they become either an input box or a textarea with SAVE and CANCEL buttons. When you edit the content and click on SAVE it should just reload that newly edited content.

Example:
If you click on the first entry’s title and amend it and click SAVE it should just load the updated title content for the first entry without reloading the entire page.

I hope this makes sense.

On August 31, 2006 at 1:52 pm Andy Moore wrote:

Just looking at localish blogs to me, I’m in Loughborough and I found this post interesting reading.

Just last week I got AJAX inline instant edit rolling on one of our site’s back ends.

It makes me laugh that an old technology like xmlhttprequest is now of age and behind the funkiest stuff online today.

On January 4, 2007 at 5:07 pm Ernie wrote:

Here is a modification you can make to your index.cfm page that will loop through all your data fields and checks to see if you have the divs for them.

Event.observe(window, 'load', init, false); function init() { // Over ride some of the default options. EditInPlace.defaults['type'] = 'text'; EditInPlace.defaults['save_url'] = 'update.cfm?FileID=#url.FileID#';


 <!---  --->

  

    // Edit title.

    if (parent.document.getElementById('#idx1#')) { 

    EditInPlace.makeEditable( { id:'#idx1#', select_text: true } );

    }

}

and change the update.cfm page to this

 UPDATE Files SET #form.ID# = WHERE FileID =  #form.content# Form id not found.

On January 4, 2007 at 5:09 pm Ernie wrote:

Well i dont know how to post code snippets, but feel free to email me for the changes ernest.breau at gmail.com

10.

On January 5, 2007 at 5:56 am Ernie wrote:

I have been playing around with this i made some modifications. What I would realy like is to get the EIP so that you dont have to click save and just be able to hit enter.

I would apprecitate any assistance.

Thanks,
Ernie

11.

On April 5, 2007 at 2:31 am Rony Fayyad wrote:

This is awesome.

Well done.

Just on question.

Does anyone know how to have a wysiwyg when updating rather than a text area?

12.

On April 6, 2007 at 6:26 pm Neil wrote:

The closest I’ve seen so far is done with jQuery library and TinyMCE:
http://dev.jquery.com/wiki/Plugins/tinyMCE

13.

On July 6, 2007 at 3:45 am Jason wrote:

This works alright for the first time I edit a text. The second time I edit an edited text, it gives me

14.

On November 8, 2007 at 8:57 pm Jeff Gladnick wrote:

Does anyone have a working example of how to get the Select feature to work?

15.

On November 8, 2007 at 9:06 pm Neil wrote:

I can’t say I’ve ever tried - and I see that Jacob’s website no longer has a page dedicated to his script. So, unfortunately I can’t help.

16.

On December 4, 2007 at 7:40 pm karl wrote:

The demo doesnt work for me. When I submit the changes the text doesnt echo back? All I see is the indicator spining? Need help.

Have your say

Fields in bold are required. Email addresses are never published or distributed.

Some HTML code is allowed:
<b> <strong> <i> <em> <del> <code> <blockquote> <a href="URI">
URIs must be fully qualified (eg: http://www.domainname.com) and all tags must be properly closed.

Line breaks and paragraphs are automatically converted.

Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.

Content

About

Neil Merton is a South African born web professional currently employed by the Servelogic. These are his thoughts and memories.

Neil Merton