CODEWITHSUNDEEP
javascriptphpjquery
John
John

Reputation: 1

How do I run a click event for a php created html table

I have php creating a table based on the results of a search and this table overwrites a previous table. When clicking a row of this table I want the details of the row to be displayed. However while clicking on the previous table works when clicking on the results table the click event is not triggered.

The initial table code and containing div:

<div id="fixInfo" style="overflow-y: auto; overflow-x:hidden;max-height:350px; width: 1000px;">
  <table class="standard" id= "list">
  <?php
    include 'DATA.php';
    $sql = "SELECT * FROM FIX";
    $result = mysqli_query($conn, $sql);
    if ($result = mysqli_query($conn, $sql)){  
      while ($row = mysqli_fetch_assoc($result)){ 
        echo '<tr>';
        echo '<td style="width:150px;">'.$row["FIX_ID"].'</td>'; 
        echo '<td style="width:150px;">'.$row["TIME"].'</td>'; 
        echo '<td style="width:150px;">'.$row["DATE"].'</td>'; 
        echo '<td style="width:150px;">'.$row["PROVIDER_ID"].'</td>'; 
        echo '</tr>';
      } 
    }
    mysqli_close($conn);
  ?>
  </table>
</div>

The jquery click event code:

<script>
  $("#list tr").on("click",function(){
    var ID = $(this).find("td:first").text();
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } 
    xmlhttp.onreadystatechange = function(){ 
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("fixstuff").innerHTML = this.responseText;
      }
    };
    var params= "ID="+ID;
    xmlhttp.open("POST","fixdetails.php",true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
    });
</script>

The result table creation code(searchFix.php):

<?php
  $sort = $_POST['sort'];
  $search= $_POST['search'];
  include 'DATA.php';

  if($search==""){
    $sql = "SELECT * FROM FIX";
  }
  else{
    $sql= "SELECT * FROM FIX WHERE ".$sort." =". $search;
  }

  $result = mysqli_query($conn, $sql);
  if ($result = mysqli_query($conn, $sql)){ 
    while ($row = mysqli_fetch_assoc($result)){
      echo '<tr>';
      echo '<td style="width:150px;">'.$row["FIX_ID"].'</td>';
      echo '<td style="width:150px;">'.$row["TIME"].'</td>';
      echo '<td style="width:150px;">'.$row["DATE"].'</td>';
      echo '<td style="width:150px;">'.$row["PROVIDER_ID"].'</td>';
      echo '</tr>';
    }   
  }
  mysqli_close($conn);
?>

Upvotes: 0

Views: 43

Answers (1)

Shaun Hare
Shaun Hare

Reputation: 3871

As you are altering the dom you will need to do a rebind. $.on does not work the same as the deprecated $.live

try changing initial line to 

$(document).on('click','#list tr', {} ,function(e){

Upvotes: 1

Related Questions