Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

Read XML and Populate a Drop Down Box

Posted on 2011-03-10

1 solution

Medium Priority

389 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 2000 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

jQuery Selectors in asp.net 2.0 - 3.5

Article by: Steve

Just a quick little trick I learned recently. Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax: (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…

ASP.NET

FAQ: Classic ASP vs. ASP.NET

Article by: Aurelian

I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…

Percona Server for MongoDB

Video by: Percona

In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

Some Basic Differences Between MySQL and MongoDB

Video by: Percona

In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…