How to execute a javascript code received by an AJAX request?

Asked

Viewed 571 times

1

I have that code in the database:

<script type="text/javascript">
    alert("teste script-1");
    var axel = Math.random() + "";
    var a = axel * 10000000000000;
    document.write('<iframe src="https:// .... ;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
    <iframe src="https://...;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>

Responding to some events (page load or btn click), I have an AJAX function that goes to the database and recovers the script. See below:

$.getJSON( "returnScript.php", {objEvent: btn_id}, function() {
            })
            .done(function(dataset) {          
                //console.log(dataset);                  
                //console.log(dataset.length);  
                if(dataset.length>0){
                    for (var index in dataset){ 
                        console.log(dataset[index].script);
                        $("body").append(dataset[index].script);
                    }                
                }
                else{
                  console.log("sem script para ser executado");
                }              
            });

In this code, after consulting the database, if there is a script to be executed (according to the criteria) it must recover all the code to make an append before finishing the body tag. As shown above, the code has a script part and an iframe part.

The fact is that if I paste this code into the page it will work well. But if I use $("body").append(dataset[index].script); the alert("teste script-1"); performs correctly but the rest of the code makes the page all white (WSOD) with the following message in the browser console:

Uncaught TypeError: Cannot read property 'style' of null
    at (index):551
    at (index):551
    at XMLHttpRequest.xhr.onreadystatechange ((index):551)

Clearly what is happening is that when the code is recovered by AJAX it does not work.

Someone would know how to fix this?

I am using Win7 + php5.3 + symfony.

javascript ajax

  • Probably your problem is document.write in the recovered script via ajax. Try using a $('body').append('<iframe src="https:// .... ;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');.

  • Correct. When we rotate document.write after the document has been loaded that fun overwrites all the code, but if it runs before the document is loaded it does not overwrite. As here in my case is an ajax, I have to replace document.write() for $('body').append(). http://stackoverflow.com/questions/19941866/document-write-overwriting-the-document . Post your reply to earn the point.

  • 1

    Exact. I waited for his return to find out if it was really the case, before explaining why this happens, since the comments have neither the purpose nor space for something more elaborate. I will answer.

1 answer

1


If you use the document.write after the HTML page has been loaded, the browser will overwrite the current content by the content of the document.write.

In your case, when you run ajax the page has already been loaded, then document.write of the contents of the asynchronous request, which is inserted in the body ($("body").append(dataset[index].script);), overwrite the entire document.

You can replace the call from document.write for:

document.body.innerHTML += '<iframe src="https:// .... ;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>';

Since you are using jQuery on the page that the code will be embedded, you can also use:

$('body').append('<iframe src="https:// .... ;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.