XPATH using javascript

**Priyanka Kshirs** · Jul 14 '11, 07:28 AM

I wanted to fill the listbox using name tags from details file. It is a xml file and datafeedfeature is a html file.
and On the click of particular item and then on click of button "details" i wanted to display the content and details from xml file in one div using xpath.It's urgent.
can anyone help me on this issue.
I am not able to produce how i will do this?
Please reply as asap.
details.xml

Code:

<?xml version="1.0" encoding="utf-8"?>
<Root>
	<Item>
		<name>Item1</name>
		<details>Item1 Details</details>
		<content>Item1 Content</content>
	</Item>
	<Item>
		<name>Item2</name>
		<details>Item2 Details</details>
		<content>Item2 Content</content>
	</Item>
	<Item>
		<name>Item3</name>
		<details>Item3 Details</details>
		<content>Item3 Content</content>
	</Item>
	<Item>
		<name>Item4</name>
		<details>Item4 Details</details>
		<content>Item4 Content</content>
	</Item>
	<Item>
		<name>Item5</name>
		<details>Item5 Details</details>
		<content>Item5 Content</content>
	</Item>
	<Item>
		<name>Item6</name>
		<details>Item6 Details</details>
		<content>Item6 Content</content>
	</Item>
	<Item>
		<name>Item7</name>
		<details>Item7 Details</details>
		<content>Item7 Content</content>
	</Item>
	<Item>
		<name>Item8</name>
		<details>Item8 Details</details>
		<content>Item8 Content</content>
	</Item>
</Root>

datafeedfeature .html

Code:

<html>
	<head>
		<title>This is testing</title>
		<script type="text/javascript">
			var items= new Array("Item1","Item2","Item3","Item4","Item5","Item6","Item7","Item8","Item9");
			
			function populateList()
			{
				for(var i=0; i<items.length; i++){
					var temp= new Option(items[i],items[i]);
					document.getElementById('sel').options.add(temp);
				}
			}
			
			function addContent(divName, content) 
			{
				//alert(content);
				document.getElementById(divName).innerHTML = content;
			}
			
			function loadXML(){
				var xmlhttp;
				if(window.XMLHttpRequest){
					xmlhttp = new XMLHttpRequest();
				}
				else{
					xmlhttp = new ActiveXObject("Micrsoft.XMLHTTP");
				}
				xmlhttp.open("GET","details.xml",false);
				xmlhttp.send();
				return xmlhttp.responseXML;
			}
			
			function readXMLUsingXPATH(){
				var xmlDoc = loadXML();
				if(xmlDoc == null){
					alert("XML HTTP object is null");
					return;
				}
				var path = "/Root/Item/name";
				var xmlNoadList,result;
				if(window.ActiveXObject){
					xmlNoadList = xmlDoc.selectNodes(path);
					alert(xmlNoadList);
					for(var i=0; i<xmlNoadList.length; i++){
						document.write("Name:" + xmlNoadList[i].childNodes[0].nodeValue);
						document.write("</br>");
					}
				}
				else if(document.implementation && document.implementation.createDocument){
					xmlNoadList = xmlDoc.evaluate(path, xmlDoc, null, XPathResult.ANY_TYPE, null);
					result = xmlNoadList.iterateNext();
					while(result){
						document.write(result.childNodes[0].nodeValue);
						document.write("</br>");
						result = xmlNoadList.iterateNext();
					}
				}
			}
			
			
		</script>
	</head>
	<body>
		
		<form name="myForm">
			Content to be added:
			<SELECT name="sel" id="sel" size="4" onChange="addContent('result', this[this.selectedIndex].text);">
			</SELECT>
			<input type="button" value="Details" onClick="readXMLUsingXPATH();">
		</form>
		<br><br>
		Your content will be added dynamically below:
		<div id="result"></div>
		<script type="text/javascript">
		onload=populateList;
		</script>
	</body>
</html>