JavaScript not executing on Ajax loaded content (no jQuery)

Question

I am having an issue where I am loading ajax HTML content into an element on my page using JavaScript, and trying to execute JavaScript within the loaded content, which is not working.

I am not (and cannot) use jQuery on this project.

The JavaScript I am using to load the ajax content look like:

var loadedobjects = "";
var rootDomain = "http://" + window.location.hostname;

function ajaxPage(url, containerId){
    var pageRequest = false;
    pageRequest = new XMLHttpRequest();

    pageRequest.onreadystatechange = function(){
        loadpage(pageRequest, containerId);
    }

    preventCache = (url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();
    pageRequest.open('GET', url+preventCache, true);
    pageRequest.send(null);
}

function loadpage(pageRequest, containerId){
    if (pageRequest.readyState == 4 && (pageRequest.status==200 || window.location.href.indexOf("http") == -1)){
        document.getElementById(containerId).innerHTML = pageRequest.responseText;
    }
}

As you can see, I am passing a URL (of an HTML page) to the function ajaxPage()

The ajaxPage() function is being called in a separate .js file, like so:

ajaxPage('test.html', 'ajax-wrapper');

Which is working, test.html is being loaded in the element with id 'ajax-wrapper', but no JavaScript in the test.html page is working.

Here is what the test.html page looks like (just plain HTML):

<div class="t-page-title">
    View Thread
</div>

<script>
    alert('hello');
</script>

Even a simple alert('hello'); on the loaded HTML is not firing. The page is not being cached, so that is not the issue. I would know what to do if I was using jQuery, but I am a bit stumped with finding a JavaScript only solution. Any suggestions?

How is this code actually called? Right now it's not actually _doing_ anything. — Matt Ball, Dec 12 '12 at 21:31
The ajaxPage function gets called in a seperate .js file `ajaxPage('test.html', 'ajax-wrapper');` which is working, the **test.html** content is being loaded, but no javascript is working within the loaded content — Brett Gregson, Dec 12 '12 at 21:34
http://stackoverflow.com/questions/11694977/setting-innerhtml-with-a-script-inside — Matt Ball, Dec 12 '12 at 21:59

Christophe · Answer 1 · 2012-12-12T22:23:32.700

1

When you use innerHTML, the tags get copied to the destination element, but scripts are not executed. You need an additional eval step to execute the scripts.

jQuery has a function for that called globalEval, without jQuery you'll need to write your own.

[Update] Here is a variation with an iframe that might help address your issue: http://jsfiddle.net/JCpgY/

In your case:

ifr.src="javascript:'"+pageRequest.responseText+"'";

The standard behavior with a div: http://jsfiddle.net/JCpgY/1/

edited Dec 12 '12 at 22:23

answered Dec 12 '12 at 21:48

Christophe

27,383
28
97
140

Is the globalEval jQuery function called on all jQuery ajax functions (get/ajax/load etc...)? I'm assuming from the name it uses eval() which if possible I would rather stay away from... – Brett Gregson Dec 12 '12 at 21:52
Not on every ajax function, but it's called on $.load, which does exactly what you're looking for. It'll be difficult to execute the scripts without eval. – Christophe Dec 12 '12 at 21:54
Thanks, I did get it working using `eval()`, but now I am having a problem using things like `innerHTML`, because when the `eval()` is fired the HTML content doesn't yet exists ( Cannot set property 'innerHTML' of null) – Brett Gregson Dec 12 '12 at 22:26
Well, see if my update can help. With eval, I think you need to extract the script tags and eval them one by one after the html has loaded. – Christophe Dec 12 '12 at 22:28

JavaScript not executing on Ajax loaded content (no jQuery)

1 Answers1