Script that was generated dynamically is failing to run

Question

Script that was generated dynamically is failing to run

I have a situation where I am adding a script tag, along with other HTML content, to my current document after making an AJAX call. However, the script is not executing as expected.

//Function to handle response
function(responseText){
    document.getElementById('reportContainer').insertAdjacentHTML('afterbegin',responseText);
}

Here is an example of what the responseText might look like:

<h2>You are <em class="won">successful</em>!</h2>
<h3>Profits</h3>
... 
<script>
    alert('dgd');
</script>

All the HTML elements are being added to the document correctly, including the script tag, but the alert message is not showing up. What could be causing this issue?

javascript ajax

Answer 1

Answer №1

Take a look at the code snippet below and use the function by following this:

var newElement = document.querySelector("#reportContainer");
exec_body_scripts(newElement);

Function Details:

exec_body_scripts = function(body_element) {
  // Locates and runs scripts within the body of a newly added element.
  // Necessary because innerHTML does not execute scripts.
  //
  // The argument 'body_element' represents an element in the DOM.

  function nodeName(element, name) {
    return element.nodeName && element.nodeName.toUpperCase() ===
              name.toUpperCase();
  };

  function evalScript(script_element) {
    var content = (script_element.text || script_element.textContent || script_element.innerHTML || ""),
        head = document.getElementsByTagName("head")[0] ||
                  document.documentElement,
        scriptTag = document.createElement("script");

    scriptTag.type = "text/javascript";
    try {
      // does not work on IE...
      scriptTag.appendChild(document.createTextNode(content));      
    } catch(error) {
      // Handling special case for IE
      scriptTag.text = content;
    }

    head.insertBefore(scriptTag, head.firstChild);
    head.removeChild(scriptTag);
  };

  // Main part of the function
  var scriptElements = [],
      currentScript,
      childNodes = body_element.childNodes,
      node,
      index;

  for (index = 0; childNodes[index]; index++) {
    node = childNodes[index];
    if (nodeName(node, "script") &&
      (!node.type || node.type.toLowerCase() === "text/javascript")) {
          scriptElements.push(node);
      }
  }

  for (index = 0; scriptElements[index]; index++) {
    currentScript = scriptElements[index];
    if (currentScript.parentNode) {currentScript.parentNode.removeChild(currentScript);}
    evalScript(scriptElements[index]);
  }
};

Answer 2

Take a look at the code snippet below and use the function by following this:

var newElement = document.querySelector("#reportContainer");
exec_body_scripts(newElement);

Function Details:

exec_body_scripts = function(body_element) {
  // Locates and runs scripts within the body of a newly added element.
  // Necessary because innerHTML does not execute scripts.
  //
  // The argument 'body_element' represents an element in the DOM.

  function nodeName(element, name) {
    return element.nodeName && element.nodeName.toUpperCase() ===
              name.toUpperCase();
  };

  function evalScript(script_element) {
    var content = (script_element.text || script_element.textContent || script_element.innerHTML || ""),
        head = document.getElementsByTagName("head")[0] ||
                  document.documentElement,
        scriptTag = document.createElement("script");

    scriptTag.type = "text/javascript";
    try {
      // does not work on IE...
      scriptTag.appendChild(document.createTextNode(content));      
    } catch(error) {
      // Handling special case for IE
      scriptTag.text = content;
    }

    head.insertBefore(scriptTag, head.firstChild);
    head.removeChild(scriptTag);
  };

  // Main part of the function
  var scriptElements = [],
      currentScript,
      childNodes = body_element.childNodes,
      node,
      index;

  for (index = 0; childNodes[index]; index++) {
    node = childNodes[index];
    if (nodeName(node, "script") &&
      (!node.type || node.type.toLowerCase() === "text/javascript")) {
          scriptElements.push(node);
      }
  }

  for (index = 0; scriptElements[index]; index++) {
    currentScript = scriptElements[index];
    if (currentScript.parentNode) {currentScript.parentNode.removeChild(currentScript);}
    evalScript(scriptElements[index]);
  }
};

Answer 3

Answer №2

The function will not run correctly if you insert it into the DOM like this. Have you considered using jQuery instead? Using jQuery will ensure that the function executes properly:

$('#reportContainer').append('<script type="text/javascript">alert(123);</script>');

Answer 4

The function will not run correctly if you insert it into the DOM like this. Have you considered using jQuery instead? Using jQuery will ensure that the function executes properly:

$('#reportContainer').append('<script type="text/javascript">alert(123);</script>');

Answer 5

Answer №3

When making an Ajax call, the data received is either plain text or XML that can be added to the DOM as an HTML fragment. However, it is important to note that all JavaScript code is restricted for security purposes. There are several options available to handle this limitation, ranging from extracting a specific part of the responseText and utilizing the eval method (although not recommended due to being considered bad practice) to employing the jQuery.load method.

Answer 6

When making an Ajax call, the data received is either plain text or XML that can be added to the DOM as an HTML fragment. However, it is important to note that all JavaScript code is restricted for security purposes. There are several options available to handle this limitation, ranging from extracting a specific part of the responseText and utilizing the eval method (although not recommended due to being considered bad practice) to employing the jQuery.load method.

Script that was generated dynamically is failing to run

Answer №1

Answer №2

Answer №3

Similar questions

What factors cause variations in script behavior related to the DOM across different browsers?

How can I create a static navigation bar and sidebar using Bootstrap 4?

Challenges arise when attempting to authenticate a user with password.js

Redux: utilizing yield within an unrecognized function

Transforming user-entered date/time information across timezones into a UTC timezone using Moment JS

What is the method for formatting within the <textarea> element?

AngularJS encountered an error following a successful GET request

jQuery autosave experiencing unexpected issues

Retrieving ng-repeat object in Angular

Automatically integrating Nivo Lightbox into your website

Am I implementing the Vue.JS onChange function correctly?

What could be causing the second switchMap to be triggered repeatedly upon subscription?

What is the best way to access the id attribute of a <td> element within a <tr> using jQuery?

Performing a Jquery ajax post to an MVC2 action

Why am I encountering difficulties connecting to the Socket IO object in Node.js using Express?

npm command syntax to accept multiple arguments

JavaScript: void(0), Internet Explorer 6, and SWFAddress are all important components

can you explain the concept of a backing instance in react?

Tips for utilizing Async/Await within an expressjs router

Which option is better: installing plotly.js or plotly.js-dist using npm?