jquery ajax + xml + IE = hair loss
Posted At : October 26, 2009 12:01 PM | Posted By : Admin
Related Categories: Ajax, Web20, Rants/Raves, Coldfusion, Javascript, jQuery, Microsoft
Related Categories: Ajax, Web20, Rants/Raves, Coldfusion, Javascript, jQuery, Microsoft
I've done ajax before with jQuery with good results on all browsers...until
I used an XML return with IE (all IE's that is).
When returning XML from a CFC (or any other server-side script), IE doesn't treat the XML document as, well, XML.
It actually barfs on it unless you tell it to load up the ActiveX control to parse your XML doc. (psst..Thanks Microsoft).
Just look at this:
$.ajax({
type: "POST",
url: "ajaxtest.cfc?method=getallblogs",
data: datastring,
success: function(data) {
var xml;
if ( $.browser.msie ) {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
$(xml).find('blog').each(function(){
var id = $(this).attr('id');
var title = $(this).find('name').text();
var url = $(this).find('url').text();
$('<div class="items" id="link_'+id+'"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#blogInfo');
});
}
});
See that little blurb in the ajax call for "if ($.browser.msie)"? That's the call you'll need to do to make IE behave like 99% of the other browsers out there.
I've put together a short demo. I know the code is duplicated, but this is for demo purposes. Hope this helps you guys doing XML data returns.
Oh and once again "Thank you Microsoft" for making my web development career such a wild adventure.
XML data return demo
p.s. the data returned is from my blackberry bloggers site. If you're a blackberry fan, check it out (http://www.blackberrybloggers.org). It might look a bit familiar :)
Here is a little helper I use when returning remote xml. I got the base of the idea from Ben Nadel's Blog. (I cant remember which post)
<cffunction name="renderXML" access="private" returntype="any" output="false">
<cfargument name="data" type="any" required="true" />
<cfset var response = toBinary(toBase64(toString(arguments.data))) />
<cfset var output = "" />
<cfsavecontent variable="output">
<cfheader name="content-length" value="#arrayLen(response)#" />
<cfcontent type="text/xml" variable="#response#" />
</cfsavecontent>
<cfreturn output />
</cffunction>
So now your methods that return remote xml just use the helper...
<cffunction name="getBlogInfo" access="remote" returntype="xml">
<!--- your xml object here --->
<cfreturn renderXML(myxmlobject) />
</cffunction>
I switched to returtype JSON and I have been really happy with it so far. The nice thing with JSON is, you can just use SerializeJSON function in ColdFusion.
Anyway just my opinion.
----
dataType: "xml",
----