Javascript not loading on Ajax div load

Question

I have a standard html page index.php and within this page I have a

<div id="alertMe">...</div>

I use a simple onclick function to do an AJAX change of this div. I wont paste the whole Ajax call.

xmlhttp.open("GET","message.php?msg=hello" , true);

message.php loads and I can display the $_GET['msg'] value in the alertMe div. However, I have a simple javascript alert which is in the file message.php

<script type="text/javascript">
  alert("I am an alert box!");
</script>

I cannot get the alert to popup. Is this because I am trying to run javascript within a div load? I would have thought that was a common requirement.

Any ideas?

==== Including files =====

index.php

<html>
 <script>
    function loadMsg(moduleID) {
        var xmlhttp;
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {  // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("alertMe").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","message.php?msg=hello" , true);
        xmlhttp.send();
    }
</script>
<body>
    <div id="alertMe"></div>
    <a href="javascript:void(0);" onclick="loadMsg();">Load Message</a>
</body>
</html>

message.php

<?php
echo $_GET['msg'];?>
<script type="text/javascript">
   alert("I am an alert box!");
</script>

You can try having the alert in success parameter of xmlhttp — Palash, May 09 '14 at 10:51
So you can't use or load javascript on a page that that was loaded by an Ajax call? — Mediatomcat, May 09 '14 at 10:52
yeah, the xhr call will just load it, but not run/execute/render it — Gwyn Howell, May 09 '14 at 10:54
You have to insert the result of your ajax call into the dom of the page containing the js that launched the ajax call. If you did so, you probably have to provide more code (js, containing html) to have someone spot the problem. note that you can fire the alert from one of the ajax callbacks (`done`, `fail`, `always`) in case you just want to notify the user about the completion of the ajax request. — collapsar, May 09 '14 at 10:54
Have you tried changing it to a POST instead of a GET? I had the same problem with JQuery's AJAX that I fixed by changing from GET to POST :) — Jamie Barker, May 09 '14 at 10:57
The page has already been parsed and that bit of javascript code was not there. Hence you need to trigger a javascript event to trigger the code, instead of just placing the code between html. — Palash, May 09 '14 at 11:00
[this SO answer](http://stackoverflow.com/a/21411134) refers to a blog post whose author claims to have solved the problems in a clean way (namely without calling 'eval'). the remainder of the thread might be of interest too. — collapsar, May 09 '14 at 12:18

score 0 · Accepted Answer · answered May 09 '14 at 13:14

As some of the commentators have pointed out, <script>s inside an AJAX response do not get executed when the HTML is injected into the page by setting the innerHTML property of a DOM node. If you really need to execute those scripts:

function setHtml(element, html) {
    element.innerHTML = html;

    var scripts = element.getElementsByTagName("script"),
        i = 0, script;

    for (i; i < scripts.length; i++) {
        script = scripts[i];

        if (script.type = "text/javascript" && !script.src) {
            eval(script.innerHTML);
        }
    }
}

Edit: I personally recommend against this. The "success" handler for your AJAX call should contain the logic you need to run post-AJAX.

Javascript not loading on Ajax div load

1 Answers1