CODEWITHSUNDEEP
ajaxcallbackjavascript
A.Angelov
A.Angelov

Reputation: 43

How to execute a page ,that contains JS ,in AJAX ,using innerHTML?

I send GET data with AJAX to another file.And on the another file I have echo "<script>alert('Something');</script>";.This is displayed dynamicly with AJAX ,i.e

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

puts the <script>alert('Something');</script> to div with name edit. But it doesn't alert anything. How to get it work?

I have mixed html/javascript. Here is the code.

function ajaxFunctions(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent 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);

}

Maybe to find the script tags and to eval them? But how to find the script tags?

Upvotes: 1

Views: 624

Answers (3)

bobince
bobince

Reputation: 536595

But how to find the script tags?

Well, parent.getElementsByTagName('script') and then evaling the data of the text node inside will do it.

However, inserting content that includes script tags is unreliable and works slightly differently across browsers. eg. IE will execute the script the first time the script node is inserted into any parent, inside the document or not, whilst Firefox will execute script the first time a subtree including the script is added to a node inside the document. So if you're not extremely careful, you can end up executing scripts twice on some browsers, or executing the script at the wrong time, following a further page manipulation.

So don't. Return script that you want to execute separately to any HTML content, eg. using a JSON object containing both the HTML and the JavaScript seperately.

Upvotes: 0

Tyson
Tyson

Reputation: 6244

Instead of trying to inject a script element in the DOM, just have your script return:

alert('Something');

And then use eval(response); to run it. Or you could add a script element with the src attribute pointing to the page that returns your JavaScript into the <head> (which is the preferred method).

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

Keep in mind that this wont work for cross-domain requests--the script has to have the same origin as the page running your code. To get around this, you'll have to use a callback.

Upvotes: 1

Ryan Mitchell
Ryan Mitchell

Reputation: 1410

It looks like the only purpose of setting innerHTML is an attempt to get the JS to execute. But once the page is loaded, JS won't 'know' that it needs to parse and execute the new text you've changed, so your method won't work. In this case, what you want is a callback function:

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

I haven't used jQuery, but it looks like you'd simply add a 'complete' property to the settings object you pass to the .ajax() call, like so:

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

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

   // ......
 });

In this case, the callback function would execute once the ajax call has completed. You can pick other events, such as on success, on failure, and so on, if you need to attach your code to a different event.

Upvotes: 0

Related Questions