Edit in place with Scriptaculous and Coldfusion

After my previous post about this topic (but with PHP instead of Coldfusion) I received some requests about how to implement "Edit in place" Scriptaculous effect using Coldfusion. The structure of this tutorial is the same seen in the previous post with PHP.

Step 1: index.cfm
Create a new blank page, index.cfm. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.cfmand add this code into tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
In the Step 2 of the PHP tutorial change this code's line into the function saveText():

http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);

... with:

http.open('get', 'save_text.cfm?newText='+textId_n+'&nocache = '+nocache);

Step 3: save_text.cfm
Create a new file called save_text.cfm and copy and paste this code inside itself:

<cfif isDefined('URL.newText')>
<cfquery datasource="mydatasource">
INSERT INTO MYTABLE (newText)
VALUES(#URL.newText#)
</cfquery>
<cfoutput>#URL.newText#</cfoutput>
<cfelse>
Error, please fills all fields!
<cfif>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.