Javascript not executing in dynamically created DIV (using PHP)

[renphi]

I have an onclick event that calls a Javascript function with calls a PHP page. The PHP page dynamically creates the content in a DIV the original onclick event triggered. Inside this dynamically created DIV a have another Javascript function, but it does no execute as I would expect.

HTML


echo "<div onClick=\"ajaxpage('moreContent.php?id=$row[id]', div$row[id]');\">";


Javascript


function ajaxpage(url, containerId)
{
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function()
{
loadpage(page_request, containerId)
}
page_request.open('GET', url, true)
page_request.send(null)

var dv = document.getElementById(containerId);
dv.style.display = (dv.style.display == 'block' ? 'none' : 'block');
}


Inside the PHP the above Javascript calls (this bit doesn't load)...


echo "<div class=\"userData\">";
echo "<table class=\"grid\" cellspacing=1 id=\"userGrid\">??</table>";
echo "<script type=\"text/javascript\">setup();</script>";
echo "</div>";


How do I get this Javascript to load?

[jscheuer1]

As you are trying to call a javascript function (setup), I assume that script is already loaded on the 'top' page. What you are then doing, importing the PHP page via AJAX is little different than importing an HTML page via AJAX. All the browser would see is:


<div class="userData">
<table class="grid" cellspacing=1 id="userGrid">??</table>
<script type="text/javascript">setup();</script>
</div>

But the 'top' page is already loaded and parsed by the browser, so setup() doesn't run.

This bit, from your AJAX routine:


loadpage(page_request, containerId)

calls the loadpage function. Since you don't show that, I don't see how that works. Generally a function like that would test the readyState value of the page_request object. If it is 4, then it would set the innerHTML of the element with the id of containerId to the value of the page_request object's responseText property.

In most cases, that would be the time to run your setup() function, something like so:


if(page_request.readyState == 4){
document.getElementById(containerId).innerHTML = page_request.responseText;
setup();
}

But, that will attempt to run setup() for every request that uses the main AJAX code. If that's not going to work out for other requests, you must determine a test to run at that point (before setup() is run) to determine whether or not to do that (run setup).

Perhaps:


if(page_request.readyState == 4){
document.getElementById(containerId).innerHTML = page_request.responseText;
if(document.getElementById('userGrid'))
setup();
}

[renphi]

Thanks jscheuer1! Yes, the script is loaded at the top of my index.php page. Not sure if it's the best place, but add you suggestion as below and I now see the simple grid where I'd expect it.

loadpage function


function loadpage(page_request, containerId)
{
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
{
document.getElementById(containerId).innerHTML=page_request.responseText
setup();
}
}


Just realized my redundancy there and added the setup(); to the original if block.