Executing Javascript through AJAX debug

Question

Whats wrong with this code or what might be causing this problem? It's not alerting "hello", but it is filling the div with The Hello and Bye World tables. I want it to alert "hello". Also I don't know jquery. Thank You

FILE1

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
     var reScript = /\<script.*?>(.*)<\/script>/mg;
     response = xmlhttp.responseText.replace(reScript, function(m,m1) {
     eval(m1);
     return "";
     });
    document.getElementById("div").innerHTML=response;
    }
  }
xmlhttp.open('GET','file2.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send();

FILE2

  <table><tr><td>Hello World</td></tr></table>
  <script type="text/javascript">
  alert('hello');
  </script>
  <table><tr><td>Bye World</td></tr></table>

What if you remove everything from var reScript = to return ""; });? — Fabrício Matté
– Fabrício Matté, Commented May 27, 2012 at 2:08
If I did that and, assuming you want it to still load, replace response with xmlhttp.responseText. It still wouldn't run the javascript because scripts added through innerHTML won't execute. — Rick Ryan
– Rick Ryan, Commented May 27, 2012 at 2:15
Are you positive on that? All my scripts are added directly through HTML and it always worked. Give it a try, I'll remove my answer if it doesn't work. — Fabrício Matté
– Fabrício Matté, Commented May 27, 2012 at 2:16
Are you using the actual HTMLDOM innerHTML attribute? I originally tried and just tested your answer, I'm only getting everything but the script. — Rick Ryan
– Rick Ryan, Commented May 27, 2012 at 2:19

Fabrício Matté · Accepted Answer · 2012-05-27 04:00:32Z

2

~~Try without the eval():~~

var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ /*var reScript = /\<script.*?>(.*)<\/script>/mg; response = xmlhttp.responseText.replace(reScript, function(m,m1) { eval(m1); return ""; });*/ document.getElementById("div").innerHTML=xmlhttp.responseText; } } xmlhttp.open('GET','file2.php',true); //xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //unnecessary for GET calls xmlhttp.send(null);

~~Evaluing your code inside the <script...></script> is unnecessary, the javascript code will be executed as soon as it's added to the DOM.~~

New edit:

You have to eliminate the linebreaks \n\r in your reponseText in order for your script to be evaluated properly. Also, there was an extra \ escape character before the first < which was breaking your code. Try:

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
     var reScript = /<script.*?>(.*)<\/script>/mg;
     response = xmlhttp.responseText.replace(/\n|\r/g, " ").replace(reScript, function(m,m1) {
     eval(m1);
     return "";
     });
    document.getElementById("div").innerHTML=response;
    }
  }
xmlhttp.open('GET','file2.php',true);
//xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);

I've added a .replace(/\n|\r/g, " ") to replace all line breaks by an white space in your responseText, which will allow for your JS to be evaluated properly and cause no visible change to the end-user. You may also replace the white space " " by an empty string "" if all of your JS is properly semi-colon'd.

The above should work fine for simple scripts, now if you'd include the JQuery lib in your page's head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Your AJAX call would be as simple as:

<script type="text/javascript">
$(document).ready(function(){
    $('#div').load('file2.php');
});
</script>

JQuery automatically parses scripts from your responseText, as noted in your linked answer.

edited May 27, 2012 at 4:00

answered May 27, 2012 at 2:15

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Fabrício Matté Over a year ago

Your AJAX function is using exactly the same structure as my older project, just that xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); isn't required for GET calls. And I have a null in the xmlhttp.send(null); but that shouldn't really matter.

Fabrício Matté Over a year ago

Firefox: Ctrl+Shift+K; Chrome/IE: F12 and select "Console" (chrome)/"Script" (IE) tab. :)

Fabrício Matté Over a year ago

That's from '09 but I see, even with or without evaluing, I still think that there's probably something else breaking the code. I'll check your regex.

Fabrício Matté Over a year ago

If you're still there, try my new code. :P Finally got it to work properly.

Fabrício Matté Over a year ago

Yes, my first assumption that the script would be executed when added to the DOM was because the very first time I echoed a script in PHP to be fetched through AJAX was already using JQuery, so I wrongly assumed that standard JS Ajax would have the same effect. :P I learned a little more today too, you're welcome. :)

|

Nimphious · Accepted Answer · 2012-05-27 02:42:46Z

0

Give this a try:

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var reScript = /<script.*?\>(.*)<\/script\>/mg.exec(xmlhttp.responseText)[1];
    var scriptElement = document.createElement('script');
    scriptElement.innerHTML = reScript;
    document.body.appendChild(scriptElement);
  }
}

Placing the code into a script element, and then appending that element to the body should cause it to execute.

edited May 27, 2012 at 2:42

answered May 27, 2012 at 2:33

Nimphious

5,0491 gold badge19 silver badges17 bronze badges

1 Comment

Rick Ryan Over a year ago

Just tried it, the script is dieing somewhere in there. Im getting nothing from the ajax now. I also added an alert before document.body. and it's not firing.

Collectives™ on Stack Overflow

Executing Javascript through AJAX debug

2 Answers 2

17 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related