Noobster Noobster - 5 months ago 17
PHP Question

js,mysql,php - Get specific result in the ajax request via while loop

I want to display only a certain result via ajax when I click on a button while it is in the while loop.

while($row = mysql_fetch_array($rs_admin))
{

echo ("<h3>" .$row['emer_type'] . "</h3> ");
echo ("<p>".$row['emer_desc'] . "</p>");
echo '<div class="button"><button type="button" onclick="loadDoc()">Change Content</button></div>':
echo '<div id="demo"><p>I WANT TO PUT IT HERE</p></div>';
}


They have their very own ID so that they know what they will fetch.
This is the ajax that I've got

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "test.php", true);
xhttp.send();
}
</script>


The test.php is this

<?php
include 'includes/db_connection.php';
$sel_admin = "select * from ehr_cm_emergency ";
$rs_admin = mysql_query($sel_admin);
while ($row = mysql_fetch_array($rs_admin))
{
echo $row['emer_more'];

}
?>


However when I'm clicking the button in the second or third button, the result is displaying in the first one.

Answer

Differentiate the id by auto increment and pass it to the function, and apply to the text to the id like following,

<?php

    $i=0;
    while($row = mysql_fetch_array($rs_admin))
    {
        $i++;
        echo ("<h3>" .$row['emer_type'] . "</h3> ");
        echo ("<p>".$row['emer_desc'] . "</p>");
        echo '<div class="button"><button type="button" onclick="loadDoc(\'demo'.$i.'\')">Change Content</button></div>';
        echo '<div id="demo'.$i.'"><p>I WANT TO PUT IT HERE</p></div>';
    }

?>

    <script>
    function loadDoc(id) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById(id).innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "test.php", true);
      xhttp.send();
    }
    </script>

For specific Row based I used emp_id for unique, change your value

<?php

    $i=0;
    while($row = mysql_fetch_array($rs_admin))
    {
        $i++;
        echo ("<h3>" .$row['emer_type'] . "</h3> ");
        echo ("<p>".$row['emer_desc'] . "</p>");
        echo '<div class="button"><button type="button" onclick="loadDoc(\'demo'.$i.'\','.$row['emp_id'].')">Change Content</button></div>';
        echo '<div id="demo'.$i.'"><p>I WANT TO PUT IT HERE</p></div>';
    }

?>

    <script>
    function loadDoc(id,empid) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById(id).innerHTML = xhttp.responseText;
        }
      };
      xhttp.open("GET", "test.php?empid="+empid, true);
      xhttp.send();
    }
    </script>


<?php
 include 'includes/db_connection.php'; 
 $sel_admin = "select * from ehr_cm_emergency where emp_id=".$_GET['emp_id'];
 $rs_admin = mysql_query($sel_admin);
 while ($row = mysql_fetch_array($rs_admin)) 
 {
     echo $row['emer_more'];

  }
?>