Javascript not executed in Ajax responseText

Question

The following is not my actual project, but an example that has the same problem as my project.

Here's the main HTML page snippet:

<div id="divExample">Before</div>
<script type="text/javascript">
    loadExample();
</script>

Here's the javascript file snippet:

xmlhttp.onreadystatechange=function()
{
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById('divExample').innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","mypanel.html",true);
xmlhttp.setRequestHeader("If-Modified-Since", "Sun, 31 Dec 1899 23:59:59 GMT");
xmlhttp.send();

Here's the fetched mypanel.html:

After
<script type="text/javascript">
    alert("Fetched script is working.");
</script>

When I load the main HTML page, the AJAX javascript runs fine. It fetches mypanel.html and puts its contents in divExample.innerHTML. The word "After" correctly shows instead of "Before".

However, the script with the alert never executes. I would not like to separate the alert script from mypanel.html. Any ideas how I can make it execute after AJAX loads it?

I've read here that this can be done.

I've read here that this cannot be done.

Any ideas how to make it happen?

Is there a reason you store the alert with the response? You might be better off putting it after the line in your response handler. The response is not actually being evaluated/executed they way you have coded it. If you run an eval(); on the response it will run (without the script tags, and you may need to include something like this in the response: var reponseHtml = 'After'; and use that in your innerHtml code). Good luck. — Brian Seim at EvoDynamic Inc
– Brian Seim at EvoDynamic Inc, Commented May 12, 2011 at 22:38
Well, the real code is not an alert. This is just an example of the problem my real project is having. The actual code does various manipulations, and I'd like it to stay with the HTML. But your idea of having it eval'd is worth checking into. Maybe I could parse the script out of the response and then eval it. That's an interesting approach. I'll check it out. Thanks! — Jonathan M
– Jonathan M, Commented May 13, 2011 at 14:14

chprpipr · Accepted Answer · 2011-05-13 16:10:06Z

4

You would want to take care to prevent arbitrary code from being run, but something along these lines could work:

...
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
    var myDiv = document.getElementById('divExample');
    myDiv.innerHTML = xmlhttp.responseText;

    var myScripts = myDiv.getElementsByTagName("script");
    if (myScripts.length > 0) {
        eval(myScripts[0].innerHTML);
    }
}
...

edited May 13, 2011 at 16:10

answered May 12, 2011 at 22:42

chprpipr

2,02916 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jonathan M Over a year ago

That's a great example, chprpipr. You and EvoD are onto the same idea. I'll check it out.

Jonathan M Over a year ago

Well, I tried it, and it seems that even though divExample's innerHtml is updated to include the full content of mypanel.html, the script part of the content is not making it into the document object, and therefore, in your example above, myScripts.length is 0. I have verified that divExample.innerHTML does contain the complete contents of mypanel.html. Maybe I just need to parse those contents manually and then eval the script. That would definitely be a clunky approach, and using the DOM would be much better, but I can't think of any other way to get the job done. Thoughts anyone?

Jonathan M Over a year ago

UPDATE: It works if I use myScript.innerHTML instead of innerText. I was mistaken when I said the scripts were not making it into the document object. They were, and myScripts.length was 1, indicating the script was indeed there. However, I had to access the content of the script by innerHTML instead of innerText. Bottom line: This works great. Much thanks!

Jonathan M Over a year ago

One more update: Because the text of the scripts is being eval'd, any functions declared in the scripts are not added to the global namespace unless you explicitly add them there by using syntax along the vein of: myfunction = function(parm1,parm2) {...}

Satys · Accepted Answer · 2017-04-05 15:02:42Z

0

In case for people, who still can't figure out,

1- check if your xmlhttp contains response key.

2- If present, then use xmlhttp.response instead of xmlhttp.responseText;

** if php is your backend server, do print_r(javascrip_code_as_string); then return;

answered Apr 5, 2017 at 15:02

Satys

2,4491 gold badge23 silver badges28 bronze badges

Collectives™ on Stack Overflow

Javascript not executed in Ajax responseText

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related