Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript is not working when including the php file in ajax [closed]

i have a drop down select list and a button in which i have inserted an onclick event so that whenever anyone is clicking on that button it will call a function which is basically includes an ajax and when on executing it will include a php file. In my php file it is taking the value from the selected drop down list and after that it will display an alert option but it is not displaying any alert.

Below is my code:-

<html>
<head>
<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","user.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users1" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

user.php

<?php
$q=$_GET["q"];
if($q ==1)
{
    echo '<script type="text/javascript">
    alert("Hello")
    </script>';
}
else {
    echo "No";
}
?>

Any help would be appreciated much and thanks for your help in advance:)

like image 864
Oh What A Noob Avatar asked Nov 12 '22 09:11

Oh What A Noob


1 Answers

So, as Chris already pointed out, if you use the AJAX call you described to return some text, you can put that in your page with a DOM update, such as you had:

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

That works. But if your responseText contains javascript, it will merely be posted into the document. Your page has already finished loading, so it will not be executed.

However, you apparently want two behaviors to result from your AJAX call. In addition to posting a body of user data to the txtHint div, you also want to have an alert pop up. To do this, you could place the code for the alert in your onreadystatechange function, after the point that posts to your txtHint div.

It is not clear from your question what logic you want controlling the alert. If you want the alert to say "Hello" for some choices of the selection and "No" for other choices, then you can just test your select input:

if (str=="1") alert("Hello");
else          alert("No");

If instead, the content of your alert should depend on what your AJAX call returned, then you would have some other logic based on xmlhttp.responseText instead. Perhaps you would even write the body of the alert into the response that user.php sends back. Then you could parse that out of the responseText, use it in your alert, strip it out, and use the rest to set txtHint's content.

like image 110
Mark Goldfain Avatar answered Nov 15 '22 07:11

Mark Goldfain