AJAX Not Loading XML Value

Dornith · 12-16-2010, 12:30 AM

I am still getting used to things like ajax and have a problem. I am creating a PBBG, a game made out of HTML, CSS, JS, ect. I have some code that will repace the content of some cells of the table with the values of some XML tags. It only is changing one box for now.

Basicly I want it to open the XML file, get "Archer" from the name tag, and place it in the th tag. But right now it only says "undefined". I figured out that that problem is with line 12 of my JS but I can't figure out how to fix it. Any help is apreiciated, thanks!

I will leave a simplified vertion of the code here. (Simplifed being all the parts being used left.)

XML

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE unit SYSTEM "unit.dtd">
<unit>
	<name>Archer</name>
</unit>

HTML

Code:

<table>
	<tr>
		<th id="Name" colspan="2">
			
		</th>
	</tr>
</table>

JS

Code:

function Archer()
	{
		if (window.XMLHttpRequest)
			{xmlhttp=new XMLHttpRequest();}
		else
			{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
		xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
					{
						txt="";
						x=xmlhttp.responseXML.documentElement.getElementsByTagName('name');
						txt=x.data;
						document.getElementById('name').innerHTML=txt;
					}
			}
	xmlhttp.open("GET","Units/Archer.xml",true);
	xmlhttp.send();
}

I have it set to onload="Archer()"

pigpen · 12-17-2010, 06:24 PM

I see some errors.

id naming error:

First, you have "Name" with capital "N" in your th tag:

Code:

<th id="Name" colspan="2">

But in your JavaScript code, you are trying to find 'name' in lowercase.

Code:

document.getElementById('name').innerHTML = txt;

This will cause an error (can't set null value to innerHTML), because there is no id with "name".

Fix your th tag and make the id lowercase:

Code:

<th id="name" colspan="2">

XML errors:

You aren't properly accessing your 'name' node, as you need an index value(like [0]), and also you aren't accessing the value in the child of that node by using nodeValue.

Replace these lines:

Code:

txt="";
x=xmlhttp.responseXML.documentElement.getElementsByTagName('name');
txt=x.data;
document.getElementById('name').innerHTML=txt;;

With this:

Code:

var txt = "";
var x = xmlhttp.responseXML.documentElement.getElementsByTagName('name')[0];
var y = x.childNodes[0];
txt = y.nodeValue;

document.getElementById('name').innerHTML = txt;