Jump to content

Using JavaScript To Call Indirect Nodes

matt4756

By matt4756
in XML

Recommended Posts

matt4756 Newbie

matt4756

Posted
Posted

Hi,I've been trying to teach myself about XML through the tutorials on the site. I have come to a problem though. This is part of the XML file:

	   <?xml version="1.0" encoding="ISO-8859-1"?>	   <catalog>		 <info>			   <title>CD1</title>			   <tracklist>				   <t1>					 <tracktitle>CD1 Track1</tracktitle>					   <artist></artist>					   <length>4:30</length>				 </t1>				   <t2>					 <tracktitle>CD1 Track2</tracktitle>					   <artist></artist>					 <length>3:20</length>				 </t2>				   <t3>					 <tracktitle>CD1 Track3</tracktitle>					   <artist></artist>					 <length>5:00</length>				 </t3>			 </tracklist>		 </info>	   </catalog>

I am trying to call selected values to an HTML page that would display something like:CD Title:CD1Track 1:CD1 Track1Track 2:CD1 Track2This is the HTML code I have used for this:

 <html> <head> <script type="text/javascript"> var xmlDoc; function loadXML() { // code for IE if (window.ActiveXObject)   {   xmlDoc=new ActiveXObject("Microsoft.XMLDOM");   xmlDoc.async=false;   xmlDoc.load("xml.xml");   getmessage();   } // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument)   {   xmlDoc=document.implementation.createDocument("","",null);   xmlDoc.load("xml.xml");   xmlDoc.onload=getmessage;   } else   {   alert('Your browser cannot handle this script');   } }  function getmessage() { document.getElementById("title").innerHTML= xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; document.getElementById("t1/tracktitle").innerHTML= xmlDoc.getElementsByTagName("t1/tracktitle")[0].childNodes[0].nodeValue; document.getElementById("t2").innerHTML= xmlDoc.getElementsByTagName("t2")[0].childNodes[0].nodeValue; } </script> </head> <body onload="loadXML()"> <h1>CD List</h1> <p><b>CD Title:</b> <span id="title"></span>  <b>Track 1:</b> <span id="t1"></span>  <b>Track 2:</b> <span id="t2"></span> </p> </body> </html>

This is returning the "CD Title" ok but the displays for "Track 1" and "Track 2" are blank. I can't get it to find the records in these other nodes. Any idea why it's not calling the records from the XML file properly?

Link to comment
Share on other sites
aalbetski Member

aalbetski

Posted
Posted

THere are several areas of adjustment that I made to your code to get it to work as you wanted. (Note, I do agree that XSLT would be preferred way to do this, but knowing the XMLDOM won't hurt you either)1. You referenced an obsolete version of the Microsoft parser, Microsoft.XMLDOM. This parser has been deprecated for about 4 or 5 years. I have updated the reference.2. You are accessing nodes as if they are DOM elements. Learn XPATH and access the XML nodes using the XMLDOM.3. Your HTML id references will never work as you wrote them... document.getElementById("t1/tracktitle") will fail, Simply usedocument.getElementById("t1")4, I referenced your XML as an XML data island in the code. This wasn't because I was too lazy to do it as an external file, just to show you another way of accessing XML. I have to adjusted load to loadXML(oXML.xml) The first code listing shows you a way to do it the way you were attempting. This method requires a knowledge of how many tracks and CD there are. Its fine as an exercise to learn DOM and XMLDOM.The second code listing shows a more dynamic way to accomplish the same thing by iterating over the XML elements. You'll note that the <t1><t2> nodes, etc.. actually get in the way. If you can control the XML structure, change it to <track> instead of t1,t2. That way you easily iterate on the tracks node list. If you need the track number, add an attribute or element. Granted there are dozens of ways to do this, and none is better than the other if they work. Just my 2c. Hope it helps some. BTW I did this for IE only, did not test on Firefox

<html><xml id="oXML"><?xml version="1.0" encoding="ISO-8859-1"?><catalog> <info>	   <title>CD1</title>	   <tracklist>		   <t1>			 <tracktitle>CD1 Track1</tracktitle>			   <artist></artist>			   <length>4:30</length>		 </t1>		   <t2>			 <tracktitle>CD1 Track2</tracktitle>			   <artist></artist>			 <length>3:20</length>		 </t2>		   <t3>			 <tracktitle>CD1 Track3</tracktitle>			   <artist></artist>			 <length>5:00</length>		 </t3>	 </tracklist> </info></catalog></xml><head><script type="text/javascript">	var xmlDoc;	function loadXML()	{	// code for IE	if (window.ActiveXObject)	   {			var xmlDoc		= 	new ActiveXObject("Msxml2.DOMDocument.4.0")	   		xmlDoc.async=false;	   		xmlDoc.loadXML(oXML.xml);	   		getmessage(oXML);   }	// code for Mozilla, Firefox, Opera, etc.	else if (document.implementation && document.implementation.createDocument)   	{		xmlDoc=document.implementation.createDocument("","",null);		xmlDoc.load("xml.xml");		xmlDoc.onload=getmessage;   }	else   {   alert('Your browser cannot handle this script');   }}function getmessage(xmlObject){	var xmlInfo = xmlObject.selectNodes("//info")(0);	document.getElementById("title").innerHTML 	= xmlInfo.selectSingleNode("//title").text	document.getElementById("t1").innerHTML		= xmlInfo.selectSingleNode("//t1/tracktitle").text	document.getElementById("t2").innerHTML		= xmlInfo.selectSingleNode("//t2/tracktitle").text}</script></head><body onload="loadXML()"><h1>CD List</h1><p><b>CD Title:</b> <span id="title"></span><b>Track 1:</b> <span id="t1"></span><b>Track 2:</b> <span id="t2"></span></p></body></html>

<html><xml id="oXML"><?xml version="1.0" encoding="ISO-8859-1"?><catalog> <info>	   <title>CD1</title>	   <tracklist>		   <t1>			 <tracktitle>CD1 Track1</tracktitle>			   <artist></artist>			   <length>4:30</length>		 </t1>		   <t2>			 <tracktitle>CD1 Track2</tracktitle>			   <artist></artist>			 <length>3:20</length>		 </t2>		   <t3>			 <tracktitle>CD1 Track3</tracktitle>			   <artist></artist>			 <length>5:00</length>		 </t3>	 </tracklist> </info> <info>	   <title>CD2</title>	   <tracklist>		   <t1>			 <tracktitle>CD2 Track1</tracktitle>			   <artist></artist>			   <length>4:30</length>		 </t1>		   <t2>			 <tracktitle>CD2 Track2</tracktitle>			   <artist></artist>			 <length>3:20</length>		 </t2>		   <t3>			 <tracktitle>CD2 Track3</tracktitle>			   <artist></artist>			 <length>5:00</length>		 </t3>	 </tracklist> </info> <info>	   <title>CD3</title>	   <tracklist>		   <t1>			 <tracktitle>CD3 Track1</tracktitle>			   <artist></artist>			   <length>4:30</length>		 </t1>		   <t2>			 <tracktitle>CD3 Track2</tracktitle>			   <artist></artist>			 <length>3:20</length>		 </t2>		   <t3>			 <tracktitle>CD3 Track3</tracktitle>			   <artist></artist>			 <length>5:00</length>		 </t3>	 </tracklist> </info></catalog></xml><head><script type="text/javascript">	var xmlDoc;	function loadXML()	{	// code for IE	if (window.ActiveXObject)	   {			var xmlDoc		= 	new ActiveXObject("Msxml2.DOMDocument.4.0")	   		xmlDoc.async=false;	   		xmlDoc.loadXML(oXML.xml);	   		getmessage(oXML);   }	// code for Mozilla, Firefox, Opera, etc.	else if (document.implementation && document.implementation.createDocument)   	{		xmlDoc=document.implementation.createDocument("","",null);		xmlDoc.load("xml.xml");		xmlDoc.onload=getmessage;   }	else   {   alert('Your browser cannot handle this script');   }}function getmessage(xmlObject){	var xmlInfos = xmlObject.selectNodes("//info");	var lCount = xmlInfos.length	var sHTML = "<h1>CD List</h1>"	for (var l=0;l<lCount;l++)	{		sHTML += "<p><b>CD Title:</b>" + xmlInfos(l).selectSingleNode(".//title").text + "</p>"		var xmlTrackTitles = xmlInfos(l).selectNodes(".//tracktitle");		var tCount = xmlTrackTitles.length;		for (var t=0;t<tCount;t++)		{			var tracknum = t+1			sHTML += "<br />Track " +  tracknum + ":" +  xmlTrackTitles(t).text;		}	}	document.getElementById("CDList").innerHTML = sHTML}</script></head><body onload="loadXML()">	<div id="CDList"></div></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...