I am faced with a situation where my HTML file utilizes a function for loading another PHP file using Ajax:
function LoadContent(n,func)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== 4 && xmlhttp.status == 200)
{
document.getElementById("div-content").innerHTML=xmlhttp.responseText;
if(typeof(func)==='undefined')
{
// nothing
}
else
{
eval(func);
}
}
}
xmlhttp.open("GET",n,true);
xmlhttp.send();
}
Everything seems to work fine up until this point. The PHP file being loaded generates HTML content which includes a
<script>
function foo() {
alert('hello');
}
</script>
The main HTML file invokes the loader with
javascript:LoadContent('file.php','foo()')
, but unfortunately, the foo() function is not executed. When checking in Chrome, it gives an error "no such function" related to the eval() line.
I am trying to figure out how I can ensure that after the Ajax loading process, the JavaScript function within the loaded HTML is actually executed? Any suggestions or recommendations would be greatly appreciated.