I want to execute a function that is sent over AJAX request from the server. The function body isn't in the calling page. For example: (the complete code is given below)
1.calling PHP script:
<script>
function fun()
{
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById("rslt").innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "ajax_js2.php", true);
ajaxRequest.send(null);
}
</script>
<input type="button" onclick="fun()">
<div id="rslt">
</div>
2.ajax_js2.php script:
<script>
function test()
{
alert("Hello");
}
</script>
<span onclick="test()">Test AJAX</span>
I know putting the function definition of "test" in the calling script will do. But I want to keep it in the second script.What should I do ? The server returns the span as a response to the client. While clicking upon the span "Test AJAX" the function should be called.
<script>
tags inserted into the DOM will not be executed, unless you run eval()
. Read more here: Can scripts be inserted with innerHTML?
So in your case, test()
will be undefined when you try to click on the span because the script code has not been executed (thus never defined the test
function).
You can get around it using something like this (after the DOM injection):
var scripts = document.getElementById("rslt").getElementsByTagName("script");
for( var i=0; i<scripts.length; i++ ) {
eval(scripts[i].innerText);
}
(p.s. eval
is not evil)