Hello,
The functions in your doThis function never get called. I think your looking to do something like this...
CODE
<script type="text/javascript">
function getHTTPObject() {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
return false;
}
function updateData(){
var myUrl="xhr.cfc?method=echoString";
http.open("GET", myUrl, true);
http.onreadystatechange=useHttpResponse;
http.send(null);
}
function useHttpResponse(){
if(http.readyState==4){
document.getElementById('results').innerHTML=http.responseText;
}
}
function doThis(){
alert('step one');
getHTTPObject();
alert('step two');
var http=getHTTPObject();
alert('step three');
updateData();
alert('step four');
useHttpResponse();
}
</script>
Best of luck.
QUOTE(midasxl @ 14 Oct, 2009 - 10:14 AM)

Can't get this to work. Is this technically AJAX or just the XMLHttpRequest object of Javascript? Check it out and let me know what you may see wrong...
CFM Page:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHR Test Page</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function doThis(){
alert('step one');
function getHTTPObject() {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
return false;
}
alert('step two');
var http=getHTTPObject();
alert('step three');
function updateData(){
var myUrl="xhr.cfc?method=echoString";
http.open("GET", myUrl, true);
http.onreadystatechange=useHttpResponse;
http.send(null);
}
alert('step four');
function useHttpResponse(){
if(http.readyState==4){
document.getElementById('results').innerHTML=http.responseText;
}
}
}
</script>
<style>
#results{
border:1px solid #000;
width:800px;
height:100px;
}
</style>
</head>
<body>
<form name="form" method="post" action="" onsubmit="return doThis();">
<input type="submit" name="submit" value="Go!"/>
</form><br />
<div id="results"></div>
</body>
</html>
coldfusion component
CODE
<cfcomponent namespace="xhr">
<cffunction name="echoString" access="remote" returntype="string">
<cfset myResult="Hello There">
<cfreturn myResult>
</cffunction>
</cfcomponent>
I would suspect this would populate the 'results' div with the return from the component. Instead it just does nothing. I set up alerts as it walks down the code and it makes it to 'step four'. After that nothing happens. What's up? Thanks for any ideas!
Cheers,
Mark