AJAX does not execute all inline JavaScript code

Question

AJAX does not execute all inline JavaScript code

I am currently using AJAX to load a fragment of a document. I have successfully loaded 'external' scripts, but I am encountering issues when trying to execute all the JavaScript within <script> tags.

Below is an example of the HTML fragment I am attempting 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 is the JavaScript code that I am using 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);
    }

With this setup, only the alert("I'm inline"); portion of the inline code is being executed, while the rest is not. There are no console errors, and it appears that the browser is ignoring the tinymce.init() part.

I am unsure if this issue is related to TinyMCE itself. Despite trying to evaluate the code, the problem persists. Interestingly, after the document loads, copying and pasting tinymce.init() into the console results in the text editor displaying correctly due to the execution of the function.

Can you identify any reasons why only the alert function is getting called, but not the rest? Do you notice any flaws in the script loading process?

Thank you.

javascript ajax

Answer 1

Answer №1

After facing compatibility issues with Chrome, I decided to implement jfriend's advice and converted the dynamic list into an array while ensuring synchronous script loading. Here is the revised approach:

response = xhr.responseText;
document.body.innerHTML = response;
responseScripts = document.getElementsByClassName('ajax-script');
i = 0;
// * Transforming 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) {
            // * Waiting for external scripts to load
            cloneScript.onload = function () {
                loadScripts(i++);
            };
        } else {
            // * Calling the function again for inline scripts
            loadScripts(i++);
        }
    }
}
if(responseScripts.length > 0) {
    responseScripts = listToArray(responseScripts);
    // * Initiating script loading process
    loadScripts();
}

Answer 2

After facing compatibility issues with Chrome, I decided to implement jfriend's advice and converted the dynamic list into an array while ensuring synchronous script loading. Here is the revised approach:

response = xhr.responseText;
document.body.innerHTML = response;
responseScripts = document.getElementsByClassName('ajax-script');
i = 0;
// * Transforming 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) {
            // * Waiting for external scripts to load
            cloneScript.onload = function () {
                loadScripts(i++);
            };
        } else {
            // * Calling the function again for inline scripts
            loadScripts(i++);
        }
    }
}
if(responseScripts.length > 0) {
    responseScripts = listToArray(responseScripts);
    // * Initiating script loading process
    loadScripts();
}

Answer 3

Answer №2

Below is an enhanced version of the concept presented in your response (taken from my feedback). Here are some key enhancements:

Transformed it into a function for localized code
Utilized var to declare all variables
Made it more versatile by using passed-in arguments for reusability
Avoided creating a stack with actual recursion
Stored repeated references in local variables
Applied Array.slice trick for array duplication
Amended the script tag structure to allow either src= or .innerHTML but not both
Centralized common code segments
Switched from using .innerHTML to .textContent to solely extract text content

Modified Code:

function insertHtmlAndExecutescripts(elem, html, cls) {
    elem.innerHTML = html;
    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;
                cloneScript.onload = function () {
                    loadScripts();
                }
                document.body.appendChild(cloneScript);
            } else if (tag.innerHTML) {
                cloneScript.textContent = tag.textContent;
                document.body.appendChild(cloneScript);
                setTimeout(function() {
                    loadScripts();
                }, 0);
            }

            tag.parentNode.removeChild(tag);
        }
    }
    loadScripts();
}

Answer 4

Below is an enhanced version of the concept presented in your response (taken from my feedback). Here are some key enhancements:

Transformed it into a function for localized code
Utilized var to declare all variables
Made it more versatile by using passed-in arguments for reusability
Avoided creating a stack with actual recursion
Stored repeated references in local variables
Applied Array.slice trick for array duplication
Amended the script tag structure to allow either src= or .innerHTML but not both
Centralized common code segments
Switched from using .innerHTML to .textContent to solely extract text content

Modified Code:

function insertHtmlAndExecutescripts(elem, html, cls) {
    elem.innerHTML = html;
    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;
                cloneScript.onload = function () {
                    loadScripts();
                }
                document.body.appendChild(cloneScript);
            } else if (tag.innerHTML) {
                cloneScript.textContent = tag.textContent;
                document.body.appendChild(cloneScript);
                setTimeout(function() {
                    loadScripts();
                }, 0);
            }

            tag.parentNode.removeChild(tag);
        }
    }
    loadScripts();
}

Answer 5

Answer №3

Experiment with logging the content returned by responseScripts[0].innerHTML. If this content contains the entire script, you can simply use the eval function to process it. However, if only the first line is present, then that may be the source of your issue.

Answer 6

Experiment with logging the content returned by responseScripts[0].innerHTML. If this content contains the entire script, you can simply use the eval function to process it. However, if only the first line is present, then that may be the source of your issue.

AJAX does not execute all inline JavaScript code

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Executing a single Function within the UseEffect Hook

Having trouble retrieving data through ajax with django

Redirecting to an Unverified Website

Toggle Canvas Visibility with Radio Button

Subtracting Arrays Containing Duplicates

AJAX failing to display correctly

Tips on arranging an array based on dates and data in JavaScript?

Having trouble getting the timer function to execute upon page load in JavaScript

What could be the reason for the lack of functionality in this jQuery code when combining a for loop with the $

Fill input text fields with values based on dropdown selection and start with 2 input fields pre-filled

Using the Sequelize query string prefix to find data that starts with a specific value

JavaScript conflicts will arise due to the introduction of Yammer Embed on September 30th, 2014

Hiding a column in jQuery DataTables

Modifying the CSS Property of a Non-React Element within a React Application

Is it possible to integrate a backbone model with Angular?

Validating a single field for City, State, and ZIP in jQuery/JavaScript

Transform the Data into JSON format

Resolving AJAX requests within a loop

JavaScript Age confirmation Overlay