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

Display previous messages in React JS chat when scrolling upwards

Issue with data-ng-class function not being invoked

Convert the button element to an image

The resolution of Angular 8 resolver remains unresolved

There are occasional instances in Angular 6 when gapi is not defined

The proper method to retrieve the parent function parameter within an inner JavaScript callback function

Enhancing Child Elements with CSS - Evaluating Rating Systems

Using AJAX in TYPO3's TCA forms to create dynamic dropdown menus

Animating the dimensions of objects in THREEjs

Creating visual content on a website

What is the best way to access a JSON Array in php without using any specified keys?

Attempting to output properties from an Express/Mongo API by utilizing a React.js frontend

Keeping JSP current with changes made to files on the client side

I'm experiencing an issue with uploading an image to Firebase as I continue to encounter an error message stating "task.on is not a function."

Is there a way to display sorting icons consistently and in a blue color for the currently selected sorting column in a React material-table component?

Dealing with audio bleed from a previous recording using fluent-ffmpeg

Enhance link with dynamic content using an AJAX call

Extracting data from website's table using JavaScript and opening the link in href

pagination functionality incorporated into element ui tables

Is it possible for me to activate a function on a different component using my header?