Javascript + CF XML Integration w/ AJAX

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!

 

you either need to use javascript to change the innerHTML of the "divver" div using data from the xml you receive back from Coldfusion, or just have Coldfusion output xml compliant html and then have javascript change the innerHTML to that.

Check out AjaxCFC (google it, I can't post a link to it,) which has a lot of ajax helpers - this will easily allow you do do what you're looking to do.

 

Do yourself a favor and start using JQuery. It makes the type of task you are talking about a breeze.

First you can set up a listener for your button like this:

$(document).ready(function(){
	$("#divver").click( function(){
		// whatever you want to run onclick of that button.  
		// We will populate this in a second.  For a test for now
		// you could just try this....
		alert('hi there!');
	});
});

Code (markup):

Then, you can add whatever ajax functionality you want. For instance, yours would be like this:

	
$(document).ready(function(){
	$("#divver").click( function(){
		$.ajax({
		  type: "POST",
		  url: "getyourstuff.cfm",
		  data: {param1: $("#field1").val(),someotherparam: "foo"},
		  success: function(msg){
		    doStuffWithYourData(msg)
		  },
		  datatype:"xml"
		});
	});
});

Code (markup):

Notice the datatype: xml

Recent trends (and for good reason!) find many more people using JSON for this type of data exchange thank XML. It is smaller and much easier to use, especially with the additional JSON functions added to CF8. If on pre-CF8, check out the JSON functions in cflib.org. If you decide to investigate that, change datatype to "json" or use the $.postJSON() function of JQuery.

To the question of how to return XML, do not CFDUMP! Take a look at the source code that generates. I made a simple example CFM file that will return a sample structure in either XML or JSON based on a url param. (eg: whatever.cfm?json or whatever.cfm?xml)
Here you go:

<cffunction name="getXml" access="private" output="false" returntype="string">
	<cfset var 	Xml = XmlNew() />
	<cfset Xml.XmlRoot = XmlElemNew(Xml,"people") />
	<cfset Xml.XmlRoot.XmlChildren[1] = XmlElemNew(Xml,"person") />
	<cfset Xml.XmlRoot.XmlChildren[1].XmlAttributes["firstname"] = "Joe" />
	<cfset Xml.XmlRoot.XmlChildren[1].XmlAttributes["lastname"] = "Smith" />
	<cfset Xml.XmlRoot.XmlChildren[2] = XmlElemNew(Xml,"person") />
	<cfset Xml.XmlRoot.XmlChildren[2].XmlAttributes["firstname"] = "Bob" />
	<cfset Xml.XmlRoot.XmlChildren[2].XmlAttributes["lastname"] = "Jones" />
	<cfreturn ToString(Xml) />
</cffunction>

<cffunction name="getJson" access="private" output="false" returntype="string">
	<cfset var People = ArrayNew(1) />
	<cfset People[1] = {firstname="Joe",lastname="Smith"} />
	<cfset People[2] = {firstname="Bob",lastname="Jones"} />
	<cfreturn SerializeJSON(People) />
</cffunction>

<cfset ReturnString = "" />
<cfif StructKeyExists(url,"json")>
	<cfset ReturnString = getJson() />
<cfelseif StructKeyExists(url,"xml")>
	<cfset ReturnString = getXml() />
</cfif>
<cfcontent reset="true" /><cfoutput>#ReturnString#</cfoutput>

Code (markup):

Hope this helps.

 

I just realized that your button is not id="divver" and that you were posting a form. In that case, use the JQuery form plugin, and bind your listener to the form. It will collect and pass the data from the form, and you can return either HTML, XML, JSON, or script. If you just want to return data to a div, you supply the target ID and it will just populate it with whatever returns. That way you can do the presentation on the server layer, and return it directly. Even easier!

 

Ajax = bad for search engines right?

 

That is a very open-ended question.
Is Ajax bad for SEO? No.
Can you hurt SEO with Ajax? Yes.

Be smart. Don't just make your entire site one big dynamic hodgepodge. Use Ajax around the edges and use it judiciously only so that it enhances the user experience, rather than just using it because you can. We use the hell out of Ajax, and have great success with SEO. Like any tool of value though, it has the potential to be misused.

 

Thanks dsuck ! Great points !!