Insert record into database using Ajax and Coldfusion

In the previous lesson we have seen how to use Ajax to insert a record into a database table using PHP. In this lesson we will explain how to implement the same tutorial using Coldfusion instead of PHP.

Download tutorial

How it works?
The structure is the same of the previous post. We have:

1. index.cfm (contains a simple form with an input text)
2. ajax_framework.js (the javascript function to enable ajax functionalities)
   
3. insert.cfm (the Coldfusion code to save the record into a database table)

We have seen how that index.cfm and ajax_framework.js are indipendent from the script language (PHP, ASP, Coldfusion...).

Step 1: index.cfm
This is the code for index.cfm: a simple form that calls (in the action attribute) a javascript function, insertRecord(), in ajax_framework.js.

<!-- Include AJAX Framework -->
<script src="ajax/ajax_framework.js" language="javascript"></script>

<!-- Show Message for AJAX response -->
<div id="insert_response"></div>

<!-- Form: the action="javascript:insert()"calls the javascript function "insert" into ajax_framework.js -->
<form action="javascript:insert()" method="post">
<input name="site_url" type="text" id="site_url" value=""/>
<input name="site_name" type="text" id="site_name" value=""/>
<input type="submit" name="Submit" value="Insert"/>
</form>

How you can see, nothing is changed respect to index.php of the previous post.

Step 2: the javascript function insert() in ajax_framework.js

In this lesson we have see how enable the XMLHTTPRequest. In ajax_framework.js file we have added this code:

/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

Now, in the same javascript file, we will add other lines of code for the function insert():

/* -------------------------- */
/* INSERT */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "Just a second..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var site_url= encodeURI(document.getElementById('site_url').value);
var site_name = encodeURI(document.getElementById('site_name').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', 'insert.cfm?site_url='+site_url+'&site_name=' +site_name+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = 'Site added:'+response;
}
}

How you can see, the only change, respect to insert() function of the previous tutorial is:

http.open('get', 'insert.cfm?site_url='+site_url+'&site_name=' +site_name+'&nocache = '+nocache);

...instead of:

http.open('get', 'insert.php?site_url='+site_url+'&site_name=' +site_name+'&nocache = '+nocache);

Step 3: insert.cfm

<cfif isDefined('URL.site_url') AND isDefined('URL.site_name')>
<cfset site_url= #URL.site_url#gt;
<cfset site_name= #URL.site_name#gt;
<!--- Change myDatasourceName with your datasource --->
<cfquery datasource="myDatasourceName">
INSERT INTO SITE (site_url, site_name) VALUES (
"#site_url#",
"#site_name#"
</cfquery>
<!--- Show the site name for the ajax response --->
<cfoutput>#site_name#</cfoutput>
<cfelse>
Error! Please fill all fields!
</cfif>

Save alla and try it in your localhost server.