Executing a dynamic webpage with JavaScript through AJAX and updating with innerHTML

Question

Executing a dynamic webpage with JavaScript through AJAX and updating with innerHTML

Sending GET data with AJAX to another file, I include

echo "<script>alert('Something');</script>";

in the other file. This content is then dynamically displayed using AJAX.

var ajaxDisplay = document.getElementById('edit');
ajaxDisplay.innerHTML = ajaxRequest.responseText;

The above code puts the

<script>alert('Something');</script>

inside a div named edit. However, no alert is shown. How can I make it work?

I have a mix of HTML and JavaScript in my project. Below is a snippet of the code:

function ajaxFunctions(){
    var ajaxRequest;  // The variable responsible for enabling Ajax!

    try{
        // Compatible with Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // For Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // An error occurred
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function to receive data from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('edit');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }

    var namef = document.getElementById('nameed').value;
    var queryString = "?namef=" + namef;
    ajaxRequest.open("GET", "try.php" + queryString, true);
    ajaxRequest.send(null);

}

Is it a good idea to locate the script tags and use eval? But how can I identify the script tags?

ajax callback javascript

Answer 1

Answer №1

Instead of attempting to insert a script element in the DOM, simply make your script deliver this:

alert('Hello');

Then execute it using eval(response);. Another option is adding a script element with the src attribute pointing to the page that provides your JavaScript within the <head> (the recommended approach).

function loadScript(url) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

Remember that this method won't function for cross-domain requests--the script must originate from the same source as the page where your code is executed. To overcome this limitation, you'll need to utilize a callback.

Answer 2

Instead of attempting to insert a script element in the DOM, simply make your script deliver this:

alert('Hello');

Then execute it using eval(response);. Another option is adding a script element with the src attribute pointing to the page that provides your JavaScript within the <head> (the recommended approach).

function loadScript(url) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

Remember that this method won't function for cross-domain requests--the script must originate from the same source as the page where your code is executed. To overcome this limitation, you'll need to utilize a callback.

Answer 3

Answer №2

It seems like the main purpose of using innerHTML is to trigger the execution of JavaScript code. However, once the page has finished loading, the JavaScript doesn't automatically recognize and process any new changes made to the text. In this scenario, what you need is a callback function:

http://api.jquery.com/jQuery.ajax/

I'm not very familiar with jQuery, but it appears that you can simply include a 'complete' property in the settings object when making the .ajax() call, like this:

 $.ajax({
   // ......

   complete: function(){
     alert('Something');
   }

   // ......
 });

With this setup, the callback function will be triggered once the ajax call is finished. You also have the option to choose other events like success or failure if you want to connect your code to different events.

Answer 4

It seems like the main purpose of using innerHTML is to trigger the execution of JavaScript code. However, once the page has finished loading, the JavaScript doesn't automatically recognize and process any new changes made to the text. In this scenario, what you need is a callback function:

http://api.jquery.com/jQuery.ajax/

I'm not very familiar with jQuery, but it appears that you can simply include a 'complete' property in the settings object when making the .ajax() call, like this:

 $.ajax({
   // ......

   complete: function(){
     alert('Something');
   }

   // ......
 });

With this setup, the callback function will be triggered once the ajax call is finished. You also have the option to choose other events like success or failure if you want to connect your code to different events.

Answer 5

Answer №3

How can the script tags be located?

The method would involve using

parent.getElementsByTagName('script')

and then evaluating the data of the text node inside.

However, it's worth noting that adding content with script tags can be unpredictable and may behave differently on various browsers. For example, Internet Explorer will run the script as soon as the script node is added to any parent, whether it's in the document or not. On the other hand, Firefox will execute the script when a subtree containing the script is added to a node within the document. This difference in behavior could lead to scripts being executed multiple times on certain browsers, or at incorrect timings after further page manipulation.

To avoid such issues, it's advisable to separate the script that needs to be executed from any HTML content. One way to do this is by using a JSON object that contains both the HTML and JavaScript separately.

Answer 6

How can the script tags be located?

The method would involve using

parent.getElementsByTagName('script')

and then evaluating the data of the text node inside.

However, it's worth noting that adding content with script tags can be unpredictable and may behave differently on various browsers. For example, Internet Explorer will run the script as soon as the script node is added to any parent, whether it's in the document or not. On the other hand, Firefox will execute the script when a subtree containing the script is added to a node within the document. This difference in behavior could lead to scripts being executed multiple times on certain browsers, or at incorrect timings after further page manipulation.

To avoid such issues, it's advisable to separate the script that needs to be executed from any HTML content. One way to do this is by using a JSON object that contains both the HTML and JavaScript separately.

Executing a dynamic webpage with JavaScript through AJAX and updating with innerHTML

Answer №1

Answer №2

Answer №3

Similar questions

Why does Safari browser keep showing NAN instead of a value?

Running an Express middleware function

xhttp.load path for server-side module

"Utilizing an if-else statement within a forEach loop

Concealing the flexslider in Angular when accessing the main URL

An unforeseen issue arose while trying to update the data in a Chart.js chart within a Vue application

The resolver function is ineffective when dealing with promise objects in Node.js

Enhance User Experience with Ajax Toolkit and Jquery Controls

Using JavaScript to set a constant variable for dynamically changing the background image URL

Content Security Policy in Firefox Extension blocking local DataTables js

The date of posting will always be '0000-00-00 00:00:00'

Using JQUERY to execute a callback function after an AJAX request is completed

encountering difficulties with installing dependencies using yarn or npm

Angular 2 dropdown list that allows users to add a personalized value in the HTML code

Creating a JavaScript script to implement a CAPTCHA feature on Google Forms

What is the best way to show an array within a string using javascript?

The Ajax request header is set to content-type application/json on the development server, but on the production server it is

Obtaining the "category" and "name" from a stacked bar chart using the Highchart OnClick event

What is the best way to manage multiple arrays?

Clear the disabled input value in VueJS