Javascript + CF XML Integration

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

freedomflyer - 28 Jul 2008 16:32 GMT

Hi everyone...
I've searched ALL over the net and I can't seem to come up with results on how
to do my task.
The task seems fairly simple, and I've tried quite a few methods, but I cannot
seem to get it to work
Here is my goal:
1)I have a simply HTML form with a submit button and a <div> tag with
id="divver". This page is "AJAX enabled" so I want the data to be transferred
"behind the scenes".
2)Inside this HTML page is some javascript to send an asynchronus request to a
.cfm page.
(NOTE: I've tried to receive a responseText from the .cfm page and this
works...so the communication is correct
3)Inside the .cfm page I just have some simple XML in a string and I've tried
using <cfdump> and <cfoutput> to output the XML

4)My goal is to receive this XML from the .cfm page and process it using
javascript and then update the HTML page with the javascript in it.

I think my problem is I don't know how to output the XML correctly using the
.cfm page, and when I receive it with my JS I don't know how to process it.

Any help would be *GREATLY* helpful. Thanks!

Reply to this Message

coffeedrinker56 - 28 Jul 2008 19:28 GMT

Sending XML:
(1) Use the CFXML tag - see the documentation; or
(2) Use the CFCONTENT tag. You can set the mime type to "text/xml" using like
this: <cfcontent type="text/xml">...
If you use the CFXML tag, you don't use the XML header line; CF creates it for
you. If you use the CFCONTENT tag. provide your own XML header line immediately
after the CFCONTENT tag.
Receiving XML:
On the JavaScript side, you access the incoming XML object using the
responseXML property - it's an OBJECT, so responseText won't work in most
browsers.

Reply to this Message

freedomflyer - 28 Jul 2008 19:33 GMT

Ok, thanks for the help!
I'm still wondering how to actually SEND this XML to the javascript. (AJAX
responseText works, but only because I'm OUTPUTTING text from the .cfm file.
Does <cfcontent> act as an "output" as well?)

Also, the Javascript is quite confusing to me as to how to actually distribute
the data into variables, as I have tried different means.

Again, thanks!

Reply to this Message

coffeedrinker56 - 28 Jul 2008 19:49 GMT

CFXML creates an XML object despite no "<?xml ..." tag.
CFCONTENT - note that there is no closing CFCONTENT tag - requires the
"text/xml" type to be specified to create the XML object, but you can output a
textual version of your output by specifying "text/text" instead.
To load a JS variable with a value, you'd set it something like this:
var xyz =
myDoc.childNodes[0].getElementsByTagName("childName")[occurrence].firstChild.nod
eValue.
... or from an attribute:
var xyz =
myDoc.childNodes[0].getElementsByTagName("childName")[occurrence].getAttribute("
myAttribute");

Reply to this Message

freedomflyer - 28 Jul 2008 19:58 GMT

Ok---
I've listed my (unworking, as it were...) code below.

I am still fairly in the dark. Defining the "Document" is where I kind of get
stuck. I am sorry for the annoyance :) I'm just not quite understanding the
entire process. I'm just trying to get some predefined data from the .cfm page
before I do anything else with GET or POST vars.
Your continued help is much appreciated.

********.cfm page*******

<cfset myxml =
'
<name>
    <first>
        RANDOMFIRSTNAME
    </first>
</name>
'

<cfcontent type = "text/xml" variable="myxml">

*****.html page w/ JS******

<html>

<body>
<script>
submitData = function(){
xmlobj = new XMLHttpRequest();
xmlobj.onreadystatechange = function(){
    if(xmlobj.readyState ==4){
            var xmlDoc=document.implementation.createDocument("","",null);
            var xyz =
xmlDoc.childNodes[0].getElementsByTagName("first")[0].firstChild.nodeValue;

            document.getElementById("divver").innerHTML = xyz;

                }

}
xmlobj.open("GET","cfxml.cfm",true);
xmlobj.send(null);

}

</script>

<label>
<input type="submit" name="Submit" value="Submit" onClick="submitData();">
</label><div id="divver">VALU</div>

</body>

</html>

Reply to this Message

Webmaster Forum / ColdFusion / Getting Started / July 2008

Javascript + CF XML Integration