CODEWITHSUNDEEP
phpjavascripthtmlajax
Rick Ryan
Rick Ryan

Reputation: 125

Executing Javascript through AJAX debug

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>

Upvotes: 1

Views: 276

Answers (2)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70139

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.

Upvotes: 2

Nimphious
Nimphious

Reputation: 5039

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.

Upvotes: 0

Related Questions