Using Ajax With Coldfusion

Ajax And Coldfusion How To Tutorial

Coldfusion + Ajax Tutorial - How to

I have this project on our company wherein I need to check whether the inputted data of a user has already been entered before. Filtering a redundancy is a vital function that I need to enable.

I'm using coldfusion as my script, checking a redundant data is very easy if I will do it by submitting the page on the server. However, I want to do it without submitting the page. I heard that it can be done using ajax.

So I gave it a try, and here is what I came up. I made it functional, meaning that I got the result that I want, although I don't think that my first ajax-coldfusion code is neat. So please leave a few comments if you happen to come across this.

Anyway, here's my code, use it in anyway you want.

This is my main template:

<script src="myajax.js"></script>

<input name="Country" onkeyup="redundant(this.value)" type="text" />
<input disabled="disabled" id="btnsaved" name="btnsave" type="submit" value="Save record" />

This what's inside my myajax.js file

var oXmlHttp

function redundant(str)
{
var url="checkredundant.cfm?&q=" + str;
oXmlHttp=GetHttpObject(stateChanged);
oXmlHttp.open("GET", url , true);
oXmlHttp.send(null);
}

function stateChanged()
{
if (oXmlHttp.readyState==4 || oXmlHttp.readyState=="complete")
{

var responsed=oXmlHttp.responseText;

var length_responsed=responsed.length;
var response_marker=responsed.indexOf('</html>');
var responsed_trimmed=responsed.substring(response_marker+8,length_responsed);
var responsed_nospace=responsed_trimmed.replace(/^\s+|\s+$/g, '');

document.getElementById("responseid").value=responsed_nospace;
//alert(responsed);
if (responsed_nospace=='okay')
{
document.getElementById("btnsaved").disabled=false;
}
else
{
document.getElementById("btnsaved").disabled=true;
}
}
}

function GetHttpObject(handler)
{
try
{
var oRequester = new XMLHttpRequest();
oRequester.onload=handler
oRequester.onerror=handler
return oRequester
}
catch (error)
{
try
{
var oRequester = new ActiveXObject("Microsoft.XMLHTTP");
oRequester.onreadystatechange=handler
return oRequester
}
catch (error)
{
return false;
}
}
}

This is what inside the checkredundant.cfm template.

<cfquery datasource="iposdb" name="qmain">
SELECT *
FROM lt_process
WHERE process='#q#';
</cfquery>

<cfoutput>
<cfif #qmain.recordcount# neq 0>
nookay
<cfelse>
okay
</cfif>
</cfoutput>

With this, I can check whether the user has entered a record that is already on the database the moment a user makes any keystroke. Functional but not that clean, hey it's my first ajax-coldfusion code!