javascript - 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 can pass this as well inside your delete_data function where this refer to current element clicked i.e : 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>