Executing Javascript functions from an AJAX - HTML response.

Question

I have a web page that displays comments, and users can click a 'Flag' link to report an inappropriate comment.

When they click the Flag link, I use AJAX and innerHTML to display a dropdown box underneath the comment with a reason code, e.g. Spam, Offensive, Unrelated to topic, etc., as well as a Cancel button.

If the user clicks Submit, I want to use another AJAX request to send their response to a PHP file, where the database is updated, and they receive a "Thank you" on their end (without reloading the page). I essentially want the DIV that displays the dropdown box to be replaced with "Thank you" using another AJAX request.

That's where the problem is. It seems that I cannot execute an AJAX request from within the HTML response from the first AJAX request. The JavaScript functions fail -- even a simple Alert('hello world') doesn't work. I tried placing the JavaScript functions in the main page that calls the first AJAX request, as well placing it in the PHP file that displays as the HTML response from the first AJAX request, but I did not have any luck -- the functions just do not run when they are called.

Everything works fine if I load the PHP file externally, so I know the JavaScript is correct. It just doesn't work when I load the PHP file into the HTML response DIV and then call the JavaScript from there.

So to sum everything up, how do you execute JavaScript functions from the HTML response of an AJAX request?

EDIT: here is a sample of what I want to do:

This is the AJAX part that populates the DIV when the person clicks the Flag link:

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4)
{
     document.getElementById(whichdiv).innerHTML=xmlhttp.responseText;
}
};

The value of xmlhttp.responseText comes from this external file:

<input type="hidden"/>
<script type="text/javascript" language="javascript">
function displayalert()
{
    alert ('Hello World!');
}
</script>

<form name="myform" id="myform">
<input type="text" name="myfield" value="teststring"/><br/>
<input type="button" name="button" value="Submit" 
   onclick="displayalert();"/>
</form>

Note: the <input type="hidden"/> above comes from a suggestion I found off of http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx.

When the user clicks the button, the javascript displayalert() function doesn't run. The alert box never pops up. If I load the file externally instead of calling it with innerHTML, the script works fine.

Can the xmlhttp.responseText contain JavaScript code?

Answer 1

depends on the browser: IE doesnt support scriptEval on html that is loaded with ajax, which means that if you have script blocks in your html, they wont be called.

Firefox supports script eval.

What i usually do is shove some json into an input, then check if the browser supports scriptEval, if it doesnt, pull the json, eval it, and call some method passing json.

if the browser supports scriptEval, i also include a script block that contains a call to the same method with the json.

you may also want to read this: http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html