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 tutorialHow it works?The structure is the same of the
previous post. We have:
- index.cfm (contains a simple form with an input text)
- ajax_framework.js (the javascript function to enable ajax functionalities)
- 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.cfmThis 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.jsIn
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.
Read More
In this screenshots the task completed has moved to end:
