Ajax Issue

damienmcd

Hi Guys / Gals.

I am having a small issue with some Ajax and I'm sure it will be really simple for one of you guys or gals to solve.

I am trying to display 3 separate tables that are updated from links within the tables. I am using an id for referencing the object where the results of the update will appear but only the last table is being initiated with my onLoad in the body tag of the page. The other two tables are appearing as 'undefined'.

I do realise that this may be in the incorrect forum but I am certain one of you guys can fix it. Thanks in advance!

Here is my code:
Test.php

<html>
<head>
	<SCRIPT language="JavaScript" SRC="ajax.js"></SCRIPT>
	<SCRIPT TYPE="text/javascript">
	function init()
	{
		callAJAX('home.html','table_left');
		callAJAX('home.html','table_center');
		callAJAX('home.html','table_right');
	}
	</SCRIPT>

</head>
<body onload="init();">

<table align="center" cols=3>
<tr>

<td>
<table style="border:solid 1px #999;">
<tr>
	<td>
		<a href="#" onclick="callAJAX('home.html','table_left', '<img src=images/loader.gif></center>')">Home</a>
		<a href="#" onclick="callAJAX('news.html','table_left', '<img src=images/loader.gif></center>')">News</a>
		<a href="#" onclick="callAJAX('about.html','table_left', '<img src=images/loader.gif></center>')">About</a>
	</td>
</tr>
<tr>
	<td id="table_left"></td>
</tr>
</table>
</td>

<td>
<table style="border:solid 1px #999;">
<tr>
	<td>
		<a href="#" onclick="callAJAX('home.html','table_center', '<img src=images/loader.gif></center>')">Home</a>
		<a href="#" onclick="callAJAX('news.html','table_center', '<img src=images/loader.gif></center>')">News</a>
		<a href="#" onclick="callAJAX('about.html','table_center', '<img src=images/loader.gif></center>')">About</a>
	</td>
</tr>
<tr>
	<td id="table_center"></td>
</tr>
</table>
</td>

<td>
<table style="border:solid 1px #999;">
<tr>
	<td>
		<a href="#" onclick="callAJAX('home.html','table_right', '<img src=images/loader.gif></center>')">Home</a>
		<a href="#" onclick="callAJAX('news.html','table_right', '<img src=images/loader.gif></center>')">News</a>
		<a href="#" onclick="callAJAX('about.html','table_right', '<img src=images/loader.gif></center>')">About</a>
	</td>
</tr>
<tr>
	<td id="table_right"></td>
</tr>
</table>
</td>

</tr>
</table>

</body>
</html>

and Ajax.js

function callAJAX(url, pageElement, callMessage) {
	document.getElementById(pageElement).innerHTML = callMessage;
		try {
			req = new XMLHttpRequest(); /* e.g. Firefox */
		} catch(e) {
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
			/* some versions IE */
		} catch (e) {
		try {
			req = new ActiveXObject("Microsoft.XMLHTTP");
			/* some versions IE */
		} catch (E) {
		req = false;
		}
	}
}

req.onreadystatechange = function() {responseAJAX(pageElement);};
req.open("GET",url,true);
req.send(null);
}

function responseAJAX(pageElement) {
	var output = '';
	if(req.readyState == 4) {
		if(req.status == 200) {
			output = req.responseText;
			document.getElementById(pageElement).innerHTML = output;
		}
	}
}