mysql - Actions links not working while fetching data from database using ajax in php

Screenshot for incorrect output is attached. Actions links are not working.]2I am using ajax to fetch data from mysql database in php and populating the table with returned data. HTML table is being populated with data but action links ( edit,view and delete) are not working.

index.php

<div id="employee_table">  
                          <table class="table table-bordered text-center">  
                            <thead class="bg-dark text-center text-white">
                               <tr>  
                                    <th>Employee Name</th> 
                                    <th>Address</th>         
                                    <th>Gender</th> 
                                    <th>Designation</th>         
                                    <th>Age</th>         
                                    <th>Photo</th>                                                  
                                    <th>Edit</th>  
                                    <th>View</th>  
                                    <th>Delete</th>  
                               </tr>
                            </thead>
                            <tbody id="tableBody">                          
                               <?php  
                               
                               $query = "SELECT * FROM tbl_employee ORDER BY name";  
                               $result = mysqli_query($connect, $query);
                               while($row = mysqli_fetch_array($result))  
                               {  
                               ?>  
                               <tr>  
                                    <td><?php echo $row["name"]; ?></td>  
                                    <td><?php echo $row["address"]; ?></td>  
                                    <td><?php echo $row["gender"]; ?></td>  
                                    <td><?php echo $row["designation"]; ?></td>  
                                    <td><?php echo $row["age"]; ?></td>
                                    <td><img src='<?php echo $row["image"]; ?>' width=80 height=30/></td>    
                                    <td><a  id="<?php echo $row["id"]; ?>" class="btn btn-warning btn-sm edit_data"/><i class="fa fa-pencil-square" aria-hidden="true"></i></a></td>  
                                    <td><a  id="<?php echo $row["id"]; ?>" class="btn btn-info btn-sm view_data"/><i class="fa fa-eye" aria-hidden="true"></i></a></td>  
                                    <td><a  id="<?php echo $row["id"]; ?>" class="btn btn-danger btn-sm  del_data"/><i class='fa fa-trash' aria-hidden='true'></i></a></td>  
                               </tr>  
                               <?php  
                               }  
                               ?>
                           <tbody>                             
                          </table>  
                     </div>  
Copy code

At this point of time, Edit,View and Delete links are working. but when inserting,updating or deleting data, then returned links are not working.

scripts.js

function showUsers(){
           //alert("hello");
         $.ajax({  
                     url:"fetchusers.php",  
                     method:"GET",
                     dataType:"json",  
                     success:function(data){                         
                          $('#tableBody').html(data); 
                     }  
                });  
          }
Copy code

fetchusers.php

<?php  
 
  require 'db.php';
  $output="";  
  $query = "SELECT * FROM tbl_employee order by name";  
      $result = mysqli_query($connect, $query);  
      //$row = mysqli_fetch_array($result);         
    while($row=mysqli_fetch_array($result)){
      $output .=
                "<tr><td>".
                     $row['name'].
                     "</td> <td>".
                     $row['address'].
                     "</td><td>".
                     $row['gender'].
                     "</td><td>".
                     $row['designation'].
                     "</td><td>".
                     $row['age'].
                     "</td><td><img src=".
                     $row['image'].
                     " width=80 height=30/></td><td><a  id=".
                     $row['id'].
                     "class='btn btn-warning btn-sm edit_data'><i class='fa fa-pencil-square' aria-hidden='true'></i></a></td><td><a  id=".
                     $row['id'].
                     "class='btn btn-info btn-sm view_data'><i class='fa fa-eye' aria-hidden='true'></i></a></td><td><a  id=".
                     $row['id'].
                     "class='btn btn-danger btn-sm del_data'><i class='fa fa-trash' aria-hidden='true'></i></a></td></tr>";
                     
        
    }
    if($output){    
       echo json_encode($output);
    }
    else{
         echo "No data found.";
    }
    
 ?>
Copy code

At this point of time, Edit,View and Delete links are not working. No event is happening. data is being populated in html table.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.