Ok the following HTML code is parsed when I load a page:

<div id="clip-wrapper"> 
    <script type="text/javascript"> 
        alert("bla");
    </script> 
</div>

This obviously leads to an alert saying "bla", after my AJAX call, the parsed HTML code looks like this:

<div id="clip-wrapper">
<script type="text/javascript">
    alert("ajaxbla");
</script>
</div>

This on the other hand, doesn't result in an alert. Why? And how do I fix this?

Ok the following HTML code is parsed when I load a page:

<div id="clip-wrapper"> 
    <script type="text/javascript"> 
        alert("bla");
    </script> 
</div>

This obviously leads to an alert saying "bla", after my AJAX call, the parsed HTML code looks like this:

<div id="clip-wrapper">
<script type="text/javascript">
    alert("ajaxbla");
</script>
</div>

This on the other hand, doesn't result in an alert. Why? And how do I fix this?

• javascript
• ajax

4 Answers 4

If there are any scripts loaded into your dom from an Ajax call, they will not be executed for security reasons.

To get the script to execute, you'll need to strip it out of the response, and run it through eval

Ideally though, you'll want to run your script as a callback for when your ajax request completes. If you're using jQuery, this would be the success event of your ajax call, and if you're doing it natively, it would be the readyStateChange event of your xhr object.

EDIT

If you really want to opt for the eval option, you could try something like this:

document.getElementById(contentDiv).innerHTML = xmlHttp.responseText;
eval(document.getElementById("clip-wrapper").innerHTML);

put you code in

$(document).ready(function()
{
  alert(msg);
});

or make use of readysatchange event of XMLHttp object.

XMLHttpobject.readyStateChange( furnction() { alert('msg'); } );

Edit

if you are using jquery than go for

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

here in sucess event you can write your code which get executed once you are done with the ajax.

any code inside body in between script tag will executed only while loading the document.

in ajax call,make use of callback or success: or oncomplete: to handle the ajax response if you are using jQuery.

You mean the second html code is coming as an ajax response?? Did you even inserted the html to the current page?

Something like,

document.body.innerHTML = ajax_response;

But even with innerHTML replacement I don't thing the script inside it will be auto executed. The browser will parse the script but won't auto execute it. (For eg, if you have a function definition in the html, after the ajax call you will be able to call those functions)

Another option is to use document.write, it will replace the whole page content with the new html and the script tags in it will be auto executed.

document.write(ajax_response);

Hope this helps,