Not all inline JavaScript gets executed via AJAX

Question

I'm loading a fragment of a document via AJAX, and I've managed to load 'external' scripts quite well, but I can't execute all the JavaScript contained inline within <script> tags.

Here's an example of the document fragment/HTML I'm trying to load:

    <textarea></textarea>
    <script src="tinyMCE.js" class="ajax-script"></script>
    <script class="ajax-script">
        alert("I'm inline");
        tinymce.init({
            selector: 'textarea',
        });
    </script>

Here's the JavaScript code I use to load this document (on XHR status 200):

    // * This response is HTML
    response = xhr.responseText;

    // * Set the innerHTML of the body to the response HTML
    document.body.innerHTML = response;

    // * Find all scripts with ajax-script class
    responseScripts = document.getElementsByClassName('ajax-script');

    // * Loop through all those scripts
    for (i = responseScripts.length; i--;) {

        // * Create a 'clone' script element
        cloneScript = document.createElement('script');

        // * If the response script has a src, add it to the clone
        if(responseScripts[0].src) {
            cloneScript.src = responseScripts[0].src;
        }

        // * If the response script has 'inline code', add it 
        if(responseScripts[0].innerHTML) {
            cloneScript.innerHTML = responseScripts[0].innerHTML;
        }

        // * Remove the original script
        responseScripts[0].parentNode.removeChild(responseScripts[0]);

        // * Append the clone script to the document
        document.body.appendChild(cloneScript);
    }

So, with this example, only the alert("I'm inline"); part of the inline code is getting executed, but not the rest. No console errors, no nothing, it just seems like the browser is ignoring the tinymce.init() part.

I don't know if this has to do with TinyMCE itself? But why would it? I've also tried evaling the code, but to no luck. After the document has loaded, I can just copy the tinymce.init() and paste it into the console, and the text editor actually shows (because tinymce.init() gets executed).

Is there any reason you can think of that explains why only the alert function gets called, but not the rest? Do you see anything wrong with this way of loading the script?

Thanks.

Answer 1

Although David Water's response did the trick in Firefox, it didn't in Chrome. So, by following the suggestions of jfriend, I turned the dynamic list into an array, and made sure the scripts loaded synchronously. Here's what I did:

response = xhr.responseText;
document.body.innerHTML = response;
responseScripts = document.getElementsByClassName('ajax-script');
i = 0;
// * Convert DOM dynamic list into an array
function listToArray(list) {
  var array = [];
  for (var i = list.length >>> 0; i--;) { 
    array[i] = list[i];
  }
  return array;
}
function loadScripts() {
    if(responseScripts[i]) {
        cloneScript = document.createElement('script');
        if(responseScripts[i].src) {
            cloneScript.src = responseScripts[i].src;
        }
        if(responseScripts[i].innerHTML) {
            cloneScript.innerHTML = responseScripts[i].innerHTML;
        }
        responseScripts[i].parentNode.removeChild(responseScripts[i]);
        document.body.appendChild(cloneScript);
        if(cloneScript.src) {
            // * For external scripts, wait 'till they load
            cloneScript.onload = function () {
                loadScripts(i++);
            };
        } else {
            // * For inline scripts, just call the function again
            loadScripts(i++);
        }
    }
}
if(responseScripts.length > 0) {
    responseScripts = listToArray(responseScripts);
    // * Start loading the scripts
    loadScripts();
}

Answer 2

Here's a cleaned up version of the idea in your answer (derived from my comments). Here's a partial list of the improvements:

1. Turned it into a function so all code is scoped local
2. Declared all variables used with var
3. Made it generic with passed in arguments for code reuse
4. Avoided stack build-up of actual recursion
5. Put some repeated references into local variables
6. Used Array.slice trick to make array copy
7. Since a script tag can only have a src= or .innerHTML (not both), made it into an if/else
8. Combine some common code into one place
9. Switched to .textContent from .innerHTML since all we want is text

Code:

function insertHtmlAndExecutescripts(elem, html, cls) {
    elem.innerHTML = html;
    // make actual array of all ajax-script tags
    var scripts = Array.prototype.slice.call(elem.getElementsByClassName(cls), 0);
    var i = 0;

    function loadScripts() {
        if (i < scripts.length) {
            var cloneScript = document.createElement('script');
            var tag = scripts[i++];
            if (tag.src) {
                cloneScript.src = tag.src;
                // * For external scripts, wait 'till they load
                cloneScript.onload = function () {
                    loadScripts();
                }
                document.body.appendChild(cloneScript);
            } else if (tag.innerHTML) {
                cloneScript.textContent = tag.textContent;
                document.body.appendChild(cloneScript);
                // avoid stack build-up of actual recursion
                setTimeout(function() {
                    loadScripts();
                }, 0);
            }

            // remove the original embedded script tag (this is likely not necessary)
            tag.parentNode.removeChild(tag);
        }
    }
    loadScripts();
}

Answer 3

Try logging what you get back from responseScripts[0].innerHTML if this is the full script then you can just eval the result. If this is just the first line then you have found your problem.