Accessing CDATA section in XML DOM from Javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • vm35
    New Member
    • May 2010
    • 2
    #1

    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:
    Code:
    <?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:
    Code:
    <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>
    Last edited by jkmyoung; May 4 '10, 11:12 PM. Reason: code tags
    Tags: None
    • jkmyoung
      Recognized Expert Top Contributor
      • Mar 2006
      • 2057
      #2
      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].getElementsByT agName("p")[0].nodeValue);

        Comment

        • vm35
          New Member
          • May 2010
          • 2
          #3
          Originally posted by jkmyoung
          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].getElementsByT agName("p")[0].nodeValue);
          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

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              IE doesn’t count whitespace textnodes (i.e. linebreaks between elements). you could also loop through all childNodes, until you find a CDATA section:
              Code:
              for (i = x[j].childNodes.length; i--;) {
    if (x[j].childNodes[i] instanceof CDATA) {
        // this is your CDATA node
    }
}
              @jkmyoung: I doubt getElementsByTa gName() 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.

                Comment

                Previous template Next
                Working...