There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.
Read XML and Populate a Drop Down Box
I would like to know how to read XML elements and populate a drop down list with a particular element.
Asked:
7-
6
1 Solution
LVL 83
Simple tuto here : http://techinitiatives.blogspot.com/2007/01/dynamic-dropdown-list-using-ajax_29.html
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>
malformed XML
your :
"corrected" :
your :
<?xml version="1.0"?>
<depots>
<depot="Aberdeen">
<address="some address"/>
</depot>
</depots>
"corrected" :
<?xml version="1.0"?>
<depots>
<depot attr1="Aberdeen">
<address attr2="some address"/>
</depot>
</depots>
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
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
If I can get this start point working I can build from that
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>
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>
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>
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Join & Write a Comment Already a member? Login.
Featured Post
There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.
Tackle projects and never again get stuck behind a technical roadblock.
Join Now