jQuery + Ajax + Coldfusion Save And Retrieve On Database

Here's how you can use jQuery, Ajax and Coldfusion for saving and retrieving data from database. I'm using MySQL, but the procedure should be fine on other database of your choice.

This tutorial will save user inputted data on the database and display the updated records without reloading the page.

For this tutorial, we will be using only two templates, the index.cfm and the ajax_save.cfm files.

First, here is the index.cfm part.

<cfform name="frmmain" method="post" action="index.cfm" id="myfrmmain">
<input type="text" name="txtfname" /> First Name<br/>
<input type="text" name="txtlname" /> Last Name<br/>
<input type="button" name="btnsave" value="Save record" onclick="savehere();"/><br/><br/>
<div id="displayhere"></div>
</cfform>

As you can see, we have two input elements here named 'txtfname' and 'txtlname'. The div with id 'displayhere' will contain the saved information from the database.

Now here's the jquery-ajax part.

function savehere()
{
$.ajax({
type: "POST",
url: "ajax_save.cfm",
data: jQuery("#myfrmmain").serialize(),
cache: false,
success: function(data){
$('#displayhere').html(data);
}
});
}

And here's what the ajax_save.cfm file contains.

<cfquery name="qsave" datasource="wareakapitan">
INSERT INTO tbl_main
(first_name, last_name)
VALUES ('#txtfname#', '#txtlname#');
</cfquery>

<cfquery name="qmain" datasource="wareakapitan">
SELECT *
FROM tbl_main
ORDER BY id_record;
</cfquery>
<table border="1">
<tr>
<td align="center">ID</td>
<td align="center">FIRST NAME</td>
<td align="center">LAST NAME</td>
</tr>
<cfloop query="qmain">
<tr>
<td align="center">#id_record#</td>
<td align="left">#first_name#</td>
<td align="left">#last_name#</td>
</tr>
</cfloop>
</table>

By the way, my database has a third column which is set to auto increment and is named 'id_record'.

So that's it, this code is tested and is 100% working.