Run the specified JavaScript code following an AJAX request

Question

Run the specified JavaScript code following an AJAX request

I am seeking a way to run a dynamically added script on a webpage (using innerHTML). While searching, I came across this link:

how to execute ajax output script

Although it is close to what I need, it hasn't quite solved my issue. When I make an AJAX request, I receive the following content along with other elements:

<link rel=StyleSheet href="/my/css/file.css" type="text/css"/>
<h1>Some header</h1>
<div>Some text</div>
<ul><li>Some text</li><li>Some Text</li></ul>
<script src='my/js/file.js'></script>

I am trying to evaluate this content after adding it to my container element (via innerHTML):

scripts = mycontainer.querySelectorAll('script');
for (k=0;k<scripts.length;k++){
    eval(scripts[k]);
}

However, I have not been successful. Do you have any suggestions? Please note that I do not want to use any libraries and I am only focusing on modern browsers without any fallbacks.

The CSS loads correctly, and the JS file exists and is properly referenced.

javascript ajax execute

Answer 1

Answer №1

Assuming I don't have your code, here are some assumptions I'll make:

listscript.php

<?php
   //fetch script list somehow.
   $script_list = array('my/js/file1.js', 'my/js/file2.js', 'my/js/file3.js');
   echo json_encode($script_list);
?>

index.html

function fetchAjax(){
 var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
 if (window.ActiveXObject){
  for (var i=0; i<activexmodes.length; i++){
   try{
    return new ActiveXObject(activexmodes[i])
   }
   catch(e){
    //ignore error
   }
  }
 }
 else if (window.XMLHttpRequest)
  return new XMLHttpRequest()
 else
  return false
}

var request=new fetchAjax()
request.onreadystatechange=function(){
 if (request.readyState==4){
  if (request.status==200 || window.location.href.indexOf("http")==-1){
   var scripts = eval("("+request.responseText+")")
   var headerID = document.getElementsByTagName("head")[0];
   for (k=0;k<scripts.length;k++){
      var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      newScript.src = scripts[k];
      headerID.appendChild(newScript);
   }

  }
  else{
   alert("Error occurred while making the request.")
  }
 }
}

request.open("GET", "listscript.php", true)
request.send(null)

References:

Retrieving JSON data from PHP using JavaScript
Guide on Dynamically Inserting Javascript

Answer 2

Assuming I don't have your code, here are some assumptions I'll make:

listscript.php

<?php
   //fetch script list somehow.
   $script_list = array('my/js/file1.js', 'my/js/file2.js', 'my/js/file3.js');
   echo json_encode($script_list);
?>

index.html

function fetchAjax(){
 var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
 if (window.ActiveXObject){
  for (var i=0; i<activexmodes.length; i++){
   try{
    return new ActiveXObject(activexmodes[i])
   }
   catch(e){
    //ignore error
   }
  }
 }
 else if (window.XMLHttpRequest)
  return new XMLHttpRequest()
 else
  return false
}

var request=new fetchAjax()
request.onreadystatechange=function(){
 if (request.readyState==4){
  if (request.status==200 || window.location.href.indexOf("http")==-1){
   var scripts = eval("("+request.responseText+")")
   var headerID = document.getElementsByTagName("head")[0];
   for (k=0;k<scripts.length;k++){
      var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      newScript.src = scripts[k];
      headerID.appendChild(newScript);
   }

  }
  else{
   alert("Error occurred while making the request.")
  }
 }
}

request.open("GET", "listscript.php", true)
request.send(null)

References:

Retrieving JSON data from PHP using JavaScript
Guide on Dynamically Inserting Javascript

Answer 3

Answer №2

Unless a more efficient solution presents itself...

I will resort to making an AJAX call for each script src, and evaluating the result. I will share the pertinent code here shortly.

Answer 4

Unless a more efficient solution presents itself...

I will resort to making an AJAX call for each script src, and evaluating the result. I will share the pertinent code here shortly.

Run the specified JavaScript code following an AJAX request

Answer №1

Answer №2

Similar questions

Techniques for implementing a JS script within a useEffect hook in a functional component

Is it possible that the background color won't change on the second click?

Leveraging TypeScript enums in conjunction with React to anticipate a string prop

Grails array using jQuery autocomplete with findByAll() function

EJS Templates with Node.js: Embracing Dynamic Design

What could be causing the error message "Uncaught ReferenceError: userId is not defined" to appear for me?

Maximizing code reusability in Javascript and React: A guide to avoiding repetition

Computed property not properly updating the v-if condition

Having trouble with my Node.js/Express/Mongoose application where I am unable to save posts using the .save method after the first post. Could this be related to a

Incorporate functionality into a button using jQuery

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

What is the reason why modifying a nested array within an object does not cause the child component to re-render?

Steering clear of Unique error E11000 through efficient handling with Promise.all

Can we dynamically apply a class to the body depending on the domain in the window's URL?

Building a fresh User profile with Firebase and Vue

Managing global devDependencies with Node and npm: A comprehensive guide

Navigating through nested nodes within an Angular directive can be achieved by

Testing the material-ui toggle component by simulating a click event

Utilizing Ajax to access a private static property at the page level through PageMethod

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows