views:

271

answers:

2

Hi there, guys.

I would really appreciate to get your help on this, as I can't seem to detect and solve the problem I'm having with an AJAX functionality on a site that I'm currently developing.

I have a webform that makes an asynchronous call to a handler (.ashx) that delivers a XML response that is later processed by a Javascript client-side function that places it's contents into the user-interface.

I'm attaching an example of the response generated by my handler, and what I would like to know is how can I get all the <body> element innerHTML (with the text and child nodes) contents to append it to a <span> element on the user-interface. Can anyone help me out with this?

XML Response returned by the handler (checked via Firebug):

<message>
    <content>
        <messageId>2</messageId>
        <from>Barack Obama</from>
        <fromMail>[email protected]</fromMail>
        <subject>Yes, we can... get World Peace</subject> 
        <body>Hello, dear citizen. I'm sending you this message to invite you to join us! <a href="http://www.whitehouse.gov"&gt;Test link</a> Thank you for your time.</body>
    </content>
</message>

Client-side Javascript function to affect the user-interface innerHTML property with the data returned via AJAX:

function GetMessageContentsCallback(args, resp) {
    //XML Parser
    try {
        //Internet Explorer
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(resp);
    }
    catch (e) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(resp, "text/xml");
    }
    var msgReply = xmlDoc.getElementsByTagName('message')[0];
    var ajaxRespondeBodyInnerHTML = msgReply.getElementsByTagName(body)[0].firstChild.nodeValue;
    //this currently only delivers inner text content, without the <a href... bit and subsequent text
    document.getElementById("bodySpan").innerHTML = ajaxRespondeBodyInnerHTML;
}
A: 

Could you use something like

var ajaxRespondeBodyInnerHTML = msgReply.getElementsByTagName(body)[0].text;

or

var ajaxRespondeBodyInnerHTML = msgReply.getElementsByTagName(body)[0].innerHTML;

that might hopefully grab everything inside?

(it's been awhile since I've worked with xml returned via ajax)

Gabriel Hurley
None of your suggestions seem to work. However, thank you for your reply.
XpiritO
+3  A: 

You have the right idea, but you have a syntax error. I tested and found the problem is with this line as expected:

var ajaxRespondeBodyInnerHTML = msgReply.getElementsByTagName("body")[0].firstChild.nodeValue;

body is not in quotes.

See http://jsbin.com/ufubo/edit for a working example.

Edit: Also, if you want to have HTML in your XML, you need to nest your content in CDATA tags. I've updated the example to show this.

Edit: I've update the example and saved it...

Justin Johnson
Thank you for your reply. However, your solution doesn't seem to accomplish what I want, as it doesn't show the "<a href=..." and the subsequent piece of text (prior to the anchor element).What I want is to show everything (all the content) of the "<body>" element of my XML AJAX response, not only the "<body>" node value.
XpiritO
See my edit for the solution to your answer.
Justin Johnson
Thanks again for your reply, but your solution doesn't seem to accomplish what I want, as I would like to display ALL node and child nodes content on the placeholder. In the end I would like to have this: placeholder.innerHTML = "Hello, dear citizen. I'm sending you this message to invite you to join us! <a href='http://www.whitehouse.gov'>Test link</a> Thank you for your time."Thanks for your help ;)
XpiritO
Like Justin said, you need to wrap the body in CDATA as the body node contains more XML.
seth
Sorry, it appears that i didn't save the changes to my example at jsbin. Try again, it now works as you've described.
Justin Johnson