How to get Javascript to execute in code that is included with AJAX

[Waizujin]

Heh, I have no idea how to explain this, but I will do my best.

I have a game where I want everything to be done without reloading. I have had 0 trouble so far but in my game I have a countdown I want to make. But I am including the page with AJAX and putting it into the main div. But it is being included with AJAX which for some reason Javascript inside included pages doesn't work. Here is some code.

 

This code is the AJAX I use to load the pages. getXmlHttpRequestObject() is set above, it shouldn't be relevant. (Ignore the split code, that is ONLY to grab the values of forms.)

		function load(page, div, extra) {
			var ajax;
			ajax = getXmlHttpRequestObject();
			ajax.onreadystatechange=function() {
				if(ajax.readyState==4) {
					document.getElementById(div).innerHTML=ajax.responseText;
				}
			}

			if(extra != null) {
				var extraSplit = extra.split(", ");
				var extraLength = extraSplit.length
				var extraNum = 0;

				while(extraLength > 0) {
					extraNum2 = extraSplit[extraNum];
					extraNum3 += '&' + extraNum2 + '=' + document.getElementById(extraNum2).value;

					extraNum++;
					extraLength--;
				}
			} else {
				extra = '';
				extraNum3 = '';
			}

			ajax.open('POST', page, true);
			ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			ajax.setRequestHeader("Content-length", extra.length);
			ajax.setRequestHeader("Connection", "close");
			ajax.send(extraNum3);
		}

 

Here is a bit of code I use to include the pages using AJAX.

 

load('pages/game/main.php', 'main', null);

 

And in-case you need it, here is main.php

<?php
include('../../config.php');

$grabNews = mysql_query("SELECT * FROM `news` ORDER BY `news_posted_timestamp` DESC LIMIT 5");
while($news = mysql_fetch_array($grabNews)) {
$newsOutput .= '
<table width="100%">
<tr>
	<th class="table_head" style="text-align: left;">'.$news['news_title'].'</th>
</tr>
<tr>
	<td class="small">Posted by '.$news['news_poster'].' on '.$news['news_posted'].'</td>
</tr>
<tr>
	<td>'.$news['news_message'].'</td>
</tr>
</table>
<br />
';
}

$output = '
<h3 class="head">'.$gameName.' News & Announcements</h3>
'.$newsOutput.'
';

$output = ereg_replace("[\r\n]+", "", $output);
echo $output;
?>

 

Basically what this is doing is removing all the new lines in the code so that it can be properly printed using Javascript.

 

Now here is the code I am having trouble with.

This is just a simple piece of javascript to test the counter.

		function counter(div, num) {
			document.getElementById(div).innerHTML=num;
		}

 

Here is the code that I am trying to get the counter to work with:

<?php
include('../../config.php');
include('../../gameConfig.php');

$output = '
<h3 class="head">You are Chopping Wood in '.$loc['location_name'].'</h3>
<center><div id="counter" onload="javascript:counter(\'counter\', \'10\');"></div></center>
';

$output = ereg_replace("[\r\n]+", "", $output);
echo $output;
?>

You see the onload? Well that isn't being executed. EVERY time I have tried doing this AJAX loading stuff Javascript NEVER executes if it is included with AJAX. So. PLEASE, does ANYONE have any ideas? If you have any questions PLEASE ask PLEASE help me this is DRIVING ME INSANE!

 

Thanks!

[RichardRotterdam]

I reccommend you don't put javascript (unless it's json) in your pages you request via ajax. Try using a oncomplete handler (a handler that waits till the your ajax page gets a response) on the main page instead.

 

Also Onload won't work since your page is already loaded the first time.