School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Welcome to Dream.In.Code
Become an Expert!

Join 308,429 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 3,257 people online right now. Registration is fast and FREE... Join Now!




Coldfusion and XMLHttpRequest

 

Coldfusion and XMLHttpRequest, Why is this not working???

midasxl

14 Oct, 2009 - 10:14 AM
Post #1

D.I.C Head
**

Joined: 3 Dec, 2008
Posts: 125



Thanked: 1 times
My Contributions
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

This post has been edited by midasxl: 14 Oct, 2009 - 10:25 AM

User is offlineProfile CardPM
+Quote Post

 
Reply to this topicStart new topic
Replies(1 - 2)

ecuscotty

RE: Coldfusion And XMLHttpRequest

14 Oct, 2009 - 11:48 AM
Post #2

New D.I.C Head
*

Joined: 14 Oct, 2009
Posts: 40



Thanked: 5 times
My Contributions
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


User is offlineProfile CardPM
+Quote Post

midasxl

RE: Coldfusion And XMLHttpRequest

15 Oct, 2009 - 07:09 AM
Post #3

D.I.C Head
**

Joined: 3 Dec, 2008
Posts: 125



Thanked: 1 times
My Contributions
ecuscotty,
Thanks for your assistance. You nailed it, and I now have a working project. I added a little jquery to the mix to initiate the functions. Here is the finished code...

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 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;
}

var http=getHTTPObject();

function updateData(){
    var myUrl="jeez.cfc?method=myFunction";
    http.open("GET", myUrl, true);
    http.onreadystatechange=useHttpResponse;
    http.send(null);
}

function useHttpResponse(){
        if(http.readyState==4){
            document.getElementById('results').innerHTML=http.responseText;
        }
}

$(function(){
    $('#go').click(function(){
        getHTTPObject();
        updateData();
        useHttpResponse();
    });
});
</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="button" id="go" value="Go!"/>
</form><br />
<div id="results"></div>
</body>
</html>


Thank you very much!
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/24/09 01:56PM

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month