php - How to display XML in a dropdown list with JQuery
663
Hi I am trying to create a dropdown list that has the abilty to show a list of XML files and will allow the user to click on their names and display the XML in a table below the list. I've been trying for the last week and keep hitting brick walls and getting very confused can someone please help me? The closes i've gotten is using a pair of buttons to display the XML in a table below.
*edit
The XML files are in the same directory as the HTML file. I am trying to have the drop-down list box and table populated using Ajax and the Server/Client Ajax interactions using JSON to exchange data.
The only thing I have managed to write because I am really bad at this at the moment is this:
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>City</th><th>Team</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("team");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("city");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("name");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('teamInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="teamInfo">
<button onclick="loadXMLDoc('econ.xml')">Eastern Conference</button>
<button onclick="loadXMLDoc('westernCon.xml')">Western Conference</button>
<br>
</div>
</body>
</html>
Answer
Solution:
Well, if you got the buttons to work, then you just need to convert to using a select and firing your JS function when they change the value
Please note that with my example you would want to add a detect in your loadXMLDoc function to determine if url == "null.xml" and if so clears your table instead of populates it... or just add an empty text file and name it null.xml.