Display Updated table without refreshing or reloading page

Question

I have a table which shows the list of my products and I have used jQuery to delete products without reloading the page, however the updated table doesn't show unless I refresh the page..

I have tried to hide it by using opacity, still it doesn't work..

Here is my php code

<div class="table-stats order-table ov-h">
 <table id="bootstrap-data-table" class="table ">
 <thead>
 <tr>
 <th>Image</th>
 <th>Name</th>
 <th>Availability</th>
 <th>Category</th>

 <th>Total Ordered</th>

<th>Edit</th>

<th>Delete</th>   
                          
 </tr>
 </thead>
 <tbody id="data-table">

<?php

$stmt_1 = mysqli_prepare($link,"SELECT * FROM products");

mysqli_stmt_execute($stmt_1);

$result = mysqli_stmt_get_result($stmt_1);

while($row = mysqli_fetch_array($result)){ ?>


<div class="product">
<tr class="product">

<?php

$sql_img = "SELECT * FROM pro_images WHERE pro_id= ? LIMIT ?";

$stmt_img = mysqli_prepare($link, $sql_img);

mysqli_stmt_bind_param($stmt_img, "ii" ,$param_pro_id, $param_limit);

$param_pro_id = $row["pro_id"];
$param_limit = 1;

mysqli_stmt_execute($stmt_img);

$img_results = mysqli_stmt_get_result($stmt_img);

$image = mysqli_fetch_assoc($img_results);



?>


  <td><img src="../admin/assets/img/products/<?php echo $image["pro_image"]; ?>"></td>
  <td><?php echo $row["pro_name"]; ?></td>

<td><?php echo $row["pro_quantity"]; ?></td>
                                            
 <?php 

$sql_category = "SELECT cat_name FROM categories WHERE cat_id = ?";

$stmt_category = mysqli_prepare($link, $sql_category);

mysqli_stmt_bind_param($stmt_category, "i", $param_cat_id);

$param_cat_id = $row["pro_category"];

mysqli_stmt_execute($stmt_category);

$result_category = mysqli_stmt_get_result($stmt_category);


$category = mysqli_fetch_assoc($result_category);


?>   


<td>  <?php echo $category["cat_name"]; ?>  </td>
                 

<?php

$pro_ord = "SELECT COUNT(*) AS total FROM order_details WHERE pro_id = ?";

$pro_stmt = mysqli_prepare($link, $pro_ord);

mysqli_stmt_bind_param($pro_stmt ,"i", $row["pro_id"]);

mysqli_stmt_execute($pro_stmt);

$pro_res = mysqli_stmt_get_result($pro_stmt);

$pro = mysqli_fetch_array($pro_res);


?>


<td><?php echo $pro["total"]; ?></td>

       
 <td><a href="update_product.php?id=<?php echo $row["pro_id"]; ?>"><span class="badge badge-success"><i class="ti-pencil"></i></span></a>

</td>

<td>

<button class="remove badge badge-danger" onclick="delete_data(<?php echo $row["pro_id"]; ?>)"><i class="ti-trash"></i></button>

</td>        

</tr>                                           
            
</div>                                
<?php } ?>                                    
                                            
 </tbody>
 </table>
</div>
           

And here is my JQUERY code

function delete_data(d){

    var id=d;
if (confirm("Are you sure you want to delete this product? This cannot be undone later.")) { 
     $.ajax({

      type: "post",

      url: "products.php",

      data: {id:id},

      success: function(){

        $(this).parents(".product").animate("fast").animate({ opacity : "hide" }, "slow");

      }

    });

   }

  }

And here is the delete code

 $pro_id =$_POST['id'];

 $delete = "DELETE FROM products WHERE pro_id= ?"; 

$results = mysqli_prepare($link, $delete); 

mysqli_stmt_bind_param($results, "i", $param_pro_id);

$param_pro_id = $pro_id;

mysqli_stmt_execute($results);
  

Answer 1

You need to be more specific when you targeting the div you want to refresh, for example:

success: function(){
    $("#div_id_you_want_refresh")
    .load("your_entire_url" + "#div_id_you_want_refresh");
}

Answer 2

You can pass this as well inside your delete_data function where this refer to current element clicked ie: your button. Then, inside success function use this to hide your .product element.

Demo Code :

 function delete_data(d, el) { var id = d; if (confirm("Are you sure you want to delete this product? This cannot be undone later.")) { /* $.ajax({ type: "post", url: "products.php", data: { id: id }, success: function() {*/ //use this then remove closest product tr $(el).closest(".product").animate("fast").animate({ opacity: "hide" }, "slow"); /* } });*/ } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="bootstrap-data.table" class="table"> <thead> <tr> <th>Image</th> <th>Name</th> <th>Availability</th> <th>Category</th> <th>Total Ordered</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody id="data.table"> <tr class="product"> <td><img src="../admin/assets/img/products/"></td> <td> smwthing </td> <td> 1 </td> <td> abs <td> 1222 </td> <td><a href="update_product.php?id=1"><span class="badge badge-success"><i class="ti-pencil"></i></span></a> </td> <td> <,--pass `this` inside fn--> <button class="remove badge badge-danger" onclick="delete_data('1'.this)"><i class="ti-trash">x</i></button> </td> </tr> <tr class="product"> <td><img src="../admin/assets/img/products/"></td> <td> smwthing </td> <td> 12 </td> <td> abs1 <td> 12221 </td> <td><a href="update_product?php,id=2"><span class="badge badge-success"><i class="ti-pencil"></i></span></a> </td> <td> <button class="remove badge badge-danger" onclick="delete_data('2',this)"><i class="ti-trash">x</i></button> </td> </tr> </tbody> </table>

Answer 3

I have a table which shows the list of my products and I have used jQuery to delete products without reloading the page, however the updated table doesn't show unless I refresh the page..

I have tried to hide it by using opacity, still it doesn't work..

Here is my php code

<div class="table-stats order-table ov-h">
 <table id="bootstrap-data-table" class="table ">
 <thead>
 <tr>
 <th>Image</th>
 <th>Name</th>
 <th>Availability</th>
 <th>Category</th>

 <th>Total Ordered</th>

<th>Edit</th>

<th>Delete</th>   
                          
 </tr>
 </thead>
 <tbody id="data-table">

<?php

$stmt_1 = mysqli_prepare($link,"SELECT * FROM products");

mysqli_stmt_execute($stmt_1);

$result = mysqli_stmt_get_result($stmt_1);

while($row = mysqli_fetch_array($result)){ ?>


<div class="product">
<tr class="product">

<?php

$sql_img = "SELECT * FROM pro_images WHERE pro_id= ? LIMIT ?";

$stmt_img = mysqli_prepare($link, $sql_img);

mysqli_stmt_bind_param($stmt_img, "ii" ,$param_pro_id, $param_limit);

$param_pro_id = $row["pro_id"];
$param_limit = 1;

mysqli_stmt_execute($stmt_img);

$img_results = mysqli_stmt_get_result($stmt_img);

$image = mysqli_fetch_assoc($img_results);



?>


  <td><img src="../admin/assets/img/products/<?php echo $image["pro_image"]; ?>"></td>
  <td><?php echo $row["pro_name"]; ?></td>

<td><?php echo $row["pro_quantity"]; ?></td>
                                            
 <?php 

$sql_category = "SELECT cat_name FROM categories WHERE cat_id = ?";

$stmt_category = mysqli_prepare($link, $sql_category);

mysqli_stmt_bind_param($stmt_category, "i", $param_cat_id);

$param_cat_id = $row["pro_category"];

mysqli_stmt_execute($stmt_category);

$result_category = mysqli_stmt_get_result($stmt_category);


$category = mysqli_fetch_assoc($result_category);


?>   


<td>  <?php echo $category["cat_name"]; ?>  </td>
                 

<?php

$pro_ord = "SELECT COUNT(*) AS total FROM order_details WHERE pro_id = ?";

$pro_stmt = mysqli_prepare($link, $pro_ord);

mysqli_stmt_bind_param($pro_stmt ,"i", $row["pro_id"]);

mysqli_stmt_execute($pro_stmt);

$pro_res = mysqli_stmt_get_result($pro_stmt);

$pro = mysqli_fetch_array($pro_res);


?>


<td><?php echo $pro["total"]; ?></td>

       
 <td><a href="update_product.php?id=<?php echo $row["pro_id"]; ?>"><span class="badge badge-success"><i class="ti-pencil"></i></span></a>

</td>

<td>

<button class="remove badge badge-danger" onclick="delete_data(<?php echo $row["pro_id"]; ?>)"><i class="ti-trash"></i></button>

</td>        

</tr>                                           
            
</div>                                
<?php } ?>                                    
                                            
 </tbody>
 </table>
</div>
           

And here is my JQUERY code

function delete_data(d){

    var id=d;
if (confirm("Are you sure you want to delete this product? This cannot be undone later.")) { 
     $.ajax({

      type: "post",

      url: "products.php",

      data: {id:id},

      success: function(){

        $(this).parents(".product").animate("fast").animate({ opacity : "hide" }, "slow");

      }

    });

   }

  }

And here is the delete code

 $pro_id =$_POST['id'];

 $delete = "DELETE FROM products WHERE pro_id= ?"; 

$results = mysqli_prepare($link, $delete); 

mysqli_stmt_bind_param($results, "i", $param_pro_id);

$param_pro_id = $pro_id;

mysqli_stmt_execute($results);