Solved

Read XML and Populate a Drop Down Box

Posted on 2011-03-10

1 solution

387 Views

Last Modified: 2012-06-21

I would like to know how to read XML elements and populate a drop down list with a particular element.

Comment

Question by:Lico_w

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

13 Comments

LVL 82

Expert Comment

by:leakim971

ID: 350947942011-03-10

Simple tuto here : http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax_29.html

Author Comment

by:Lico_w

ID: 350950332011-03-10

I should have been more specific, I've attached my asp code below but it displays nothing. Any ideas? I have also attached a sample XML doc

<html>
<body>

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","depots.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("depots");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("Depot")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  'document.write(x[i].getElementsByTagName("Depot")[0].childNodes[0].nodeValue);
  'document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

Open in new window

depots.xml

LVL 82

Expert Comment

by:leakim971

ID: 350950972011-03-10

malformed XML

your :

<?xml version="1.0"?>

<depots>

	<depot="Aberdeen">
		<address="some address"/>
	</depot>
</depots>

Open in new window

"corrected" :

<?xml version="1.0"?>

<depots>
	<depot attr1="Aberdeen">
		<address attr2="some address"/>
	</depot>
</depots>

Open in new window

Author Comment

by:Lico_w

ID: 350951202011-03-10

Can you post the update to my script to get it to work as i've updated the xml and javascript but still doesn't work

LVL 82

Expert Comment

by:leakim971

ID: 350953902011-03-10

you just need a table with a row having its cell with "Aberdeen" inside? That is ?

Author Comment

by:Lico_w

ID: 350954842011-03-10

No I want to read it from the XML. There are lots more elements and values within my full xml, didn't want to publish full depot info online.

If I can get this start point working I can build from that

LVL 82

Expert Comment

by:leakim971

ID: 350955012011-03-10

yes but for now what do you want to see from the xml file in the table cell with your sample?

Author Comment

by:Lico_w

ID: 350955202011-03-10

The depot name would be perfect

Author Comment

by:Lico_w

ID: 350955422011-03-10

I.e. Aberdeen

LVL 82

Accepted Solution

by:leakim971

leakim971 earned 500 total points

ID: 350958392011-03-10

With simple Javascript :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create table from XML</title>
<script type="text/javascript">
	window.onload = function() {
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		xmlhttp.open("GET","depots.xml",false);
		xmlhttp.send();
		xmlDoc = xmlhttp.responseXML; 
		var table = document.createElement("table");	
		table.setAttribute("border", "1");
		var x = xmlDoc.getElementsByTagName("depots");
		for(var i=0;i<x.length;i++) {
			var row = table.insertRow(table.rows.length);
			for(j=0;j<x[0].childNodes.length;j++) {
				if(x[0].childNodes[j].nodeType == 1) {
					var cell = row.insertCell(row.cells.length);
					var text = document.createTextNode( x[0].childNodes[j].getAttribute("attr1") );
					cell.appendChild( text );
				}
			}
	  }
	  document.getElementsByTagName("body")[0].appendChild(table);
	}
</script>
<body>
</body>
</html>

Open in new window

LVL 82

Expert Comment

by:leakim971

ID: 350958462011-03-10

With jQuery :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create table from XML</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$.get("depots.xml", function(data) {
			$("body").append("<table border='1'></table>");
			$.each($("depot", data), function() {
				$("table").append("<tr><td>" + $(this).attr("attr1") + "</td></tr>");
			});
		});
	});
</script>
<body>
</body>
</html>

Open in new window

LVL 82

Expert Comment

by:leakim971

ID: 350959062011-03-10

Your code << YES IT CAN >> :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create table from XML</title>
<body>
<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","depots.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("depots");
for (i=0;i<x.length;i++)
  { 
			for(j=0;j<x[0].childNodes.length;j++) {
				if(x[0].childNodes[j].nodeType == 1) {
				  document.write("<tr><td>");
				  document.write(x[0].childNodes[j].getAttribute("attr1"));
				  document.write("</td>");
				}
			}
  }
document.write("</table>");
</script>
</body>
</html>

Open in new window

Author Closing Comment

by:Lico_w

ID: 350966782011-03-10

I can see why your ranked as genius!!!

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

ASP.NET code behind incompatible with back() in Android browser

Article by: alexcohn

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…

ASP.NET

User Log In Using A Token

Article by: Scott

This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…

Learn how to improve Mouse, Pointer and Cursor visibility in Windows 10

Video by: Andrew

In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…

Network monitoring: why having a policy is the best policy?

Video by: AdRem

Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…