Accessing CDATA section in XML DOM from Javascript

I'm trying to access CDATA inside XML file, works fine in FF but not IE (pretty much all versions). If anyone has any suggestions, please help.
Thanks in advance.

XML:

Expand|Select|Wrap|Line Numbers

 <?xml version="1.0" encoding="ISO-8859-1"?>
 
<CATALOG>

    <CD>

        <ARTIST>Bob Dylan</ARTIST>

        <![CDATA[ <p> Empire Burlesque </p> ]]>

    </CD>

    <CD>

        <ARTIST>Bonnie Tyler</ARTIST>

        <![CDATA[ <p> Hide your heart </p> ]]>

    </CD>

    <CD>

        <ARTIST>Dolly Parton</ARTIST>

        <![CDATA[ <p> Greatest Hits </p> ]]>

    </CD>

    <CD>

        <ARTIST>Gary Moore</ARTIST>

        <![CDATA[ <p> Still got the blues </p> ]]>

    </CD>

    <CD>

        <ARTIST>Eros Ramazzotti</ARTIST>

        <![CDATA[ <p> Eros </p> ]]>

    </CD>

    <CD>

        <ARTIST>Bee Gees</ARTIST>

        <![CDATA[ <p> One night only </p> ]]>

    </CD>

    <CD>

        <ARTIST>Dr.Hook</ARTIST>

        <![CDATA[ <p> Sylvias Mother </p> ]]>

    </CD>

    <CD>

        <ARTIST>Rod Stewart</ARTIST>

        <![CDATA[ <p> Maggie May </p> ]]>

    </CD>

    <CD>

        <ARTIST>Andrea Bocelli</ARTIST>

        <![CDATA[ <p> Romanza </p> ]]>

    </CD>

    <CD>

        <ARTIST>Percy Sledge</ARTIST>

        <![CDATA[ <p> When a man loves a woman </p> ]]>

    </CD>

    <CD>

        <ARTIST>Savage Rose</ARTIST>

        <![CDATA[ <p> Black angel </p> ]]>

    </CD>

    <CD>

        <ARTIST>Many</ARTIST>

        <![CDATA[ <p> 1999 Grammy Nominees </p> ]]>

    </CD>
 
</CATALOG>

HTML:

Expand|Select|Wrap|Line Numbers

 <html>

<head>
 
<script type="text/javascript">

var xmlDoc;

if (window.XMLHttpRequest)

  {

  xhttp=new XMLHttpRequest();

  }

else // Internet Explorer 5/6

  {

  xhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xhttp.open("GET","acctest2.xml",false);

xhttp.send("");

xmlDoc=xhttp.responseXML;
 
var x=xmlDoc.getElementsByTagName("CD");
 
function show(i)

{

artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);

title=(x[i].childNodes[3].textContent);

txt="Artist: "+artist+"<br />Title: "+title  ;

document.getElementById("show").innerHTML=txt;

current=i;

}
 
current=0;
 
function next()

{

if (current<x.length-1)

  {

  current++;

  show(current);

  }

}
 
function previous()

{

if (current>0)

  {

  current--;

  show(current);

  }

}
 
</script>

</head>
 
<body onLoad="show(0)">

<div id='show'></div>

<br />

<input type="button" onClick="previous()" value="previous" />

<input type="button" onClick="next()" value="next" />

<br />
 
<br />

<a onclick='show("0"); return false;' href="">item 0</a><br />

<a onclick='show("1"); return false;' href="">item 1</a><br />

<a onclick='show("2"); return false;' href="">item 2</a><br />

<a onclick='show("3"); return false;' href="">item 3</a><br />

<a onclick='show("4"); return false;' href="">item 4</a><br />

<a onclick='show("5"); return false;' href="">item 5</a><br />

<a onclick='show("6"); return false;' href="">item 6</a><br />

<a onclick='show("7"); return false;' href="">item 7</a><br />

<a onclick='show("8"); return false;' href="">item 8</a><br />

<a onclick='show("9"); return false;' href="">item 9</a><br />

<a onclick='show("10"); return false;' href="">item 10</a><br />

<a onclick='show("11"); return false;' href="">item 11</a><br />

<a onclick='show("12"); return false;' href="">item 12</a><br />
 
</body>

</html>

May 4 '10 #1

Follow Post Reply

9269

jkmyoung

2,057

Expert 2GB

title=(x[i].childNodes[3].textContent);
Noticed you've hardcoded the 3. Are you trying to get the entire text node, <p> tags and all?

I'm not great with browser versions, but this might work.
title=(x[i].getElementsByTagName("p")[0].nodeValue);

May 4 '10 #2

vm35

@jkmyoung
Good call, Thank you! I actually did figured it out about 30 mins ago. Apparently in FF it's title=(x[i].childNodes[3].data and in IE it's title=(x[i].childNodes[1].data. Technically, all I need to do is create and if/else statement for each browser. Your solution would make it much more simple though, I will try it. Thanks again.
vlad

May 4 '10 #3

Dormilich

8,658

Expert Mod 8TB

IE doesn’t count whitespace textnodes (i.e. linebreaks between elements). you could also loop through all childNodes, until you find a CDATA section:

Expand|Select|Wrap|Line Numbers

 for (i = x[j].childNodes.length; i--;) {

    if (x[j].childNodes[i] instanceof CDATA) {

        // this is your CDATA node

    }

}

@jkmyoung: I doubt getElementsByTagName() works inside CDATA nodes, since that is unparsed text.

from the XML point-of-view it would make more sense to use namespaces to save the HTML, though I don’t know how good IE is in handling that.

May 5 '10 #4

Accessing CDATA section in XML DOM from Javascript

Post your reply

Similar topics