Is there a way to get AJAX to successfully load inline script functions?
I can't seem to figure out why this is not working. I am attempting to render a page with AJAX and the page render successfully; however, unless I declare a javascript function in the parent document, I cannot get the inline script to work. I generated a simple example that is relative to what I am attempting to accomplish.
PARENT DOCUMENT
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function loadChild(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("childContent").innerHTML = this.responseText;
}
};
xhttp.open("GET", "./child.html", true);
xhttp.send();
}
</script>
</head>
<body>
<input type='button' value='Load Child' onclick='loadChild();'/>
<div id='childContent'>
</div>
</body>
</html>
CHILD DOCUMENT
<input type='button' value='Child Function' onclick='childFunction();'/>
<script type='text/javascript'>
function childFunction(){
alert('Do something');
}
</script>
I am trying to create an adaptive framework via PHP that I can use for my whole site and call the sub-sites using AJAX to load; however, to get this to currently function correctly, I am having to render every function in the parent document prior to calling each page. I want to know if there is a way to get AJAX to successfully load inline script functions?
