Update and Display value without refreshing the page

Question

I want to change the status (Active/Deactive) of records in database without actually submitting(refreshing page) data, using jquery. In my script Status is getting changed in database but as it is not refreshing, display status is not updating. is there a way to display the changed status without refreshing? i mean as soon as it updates in database, it should reflect in the status.

Here is my script

 <table class="table table-bordered table-condensed table-striped mb-6">
                                                        <thead>
                                                        <tr>
                                                        <th>Firstname</th>
                                                        <th>Mobile</th>
                                                       <th>Status</th>
</tr>
                                                        </thead>
                                                        <tbody>
                                                        <?php 
//$CQuery = ""; my query
while($ConRow = DB_fetch_array($CQuery ))
                                                        {
                                                            ?>
                                                         <tr> 
<td><?php echo $ConRow['fname']; ?></td>
<td><?php echo $ConRow['mobile']; ?></td>
<?php if($ConRow['status']=='A') { ?>
<td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-danger btn-sm">De-Activate</button> </td>
<?php } else if($ConRow['status']=='D') { ?> 
<td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-success btn-sm">Activate</button> </td> 
<?php } ?>  
       </tr>
       <?php } ?>

</tbody>
</table>

Script

<script type="text/javascript" >
        $(function() {

            $(".delbutton").click(function() {
                var del_id = $(this).attr("id");
                var data1 = 'id=' + del_id;
                if (confirm("Sure you want to De-Activate this?.")) {
                    $.ajax({
                        type : "POST",
                        url : "DisableContact.php", 
                        data : data1,
                        success : function() {
                        }
                    });
                    $(this).parents(".record").animate("fast").animate({
                        opacity : "hide"
                    }, "slow");
                }
                return false;
            });
        });
 </script>

PHP

$id = $_POST['id'];
$sel1 = "SELECT status FROM contacts WHERE con_id=".$id."";

$Sel = DB_query($sel1);
$srow = DB_fetch_array($Sel);
if($srow['status']=='A')
{
$sql = "UPDATE contacts SET status='D' WHERE con_id=".$id;
}
else
if($srow['status']=='D')
{
$sql = "UPDATE contacts SET status='A' WHERE con_id=".$id;  
}

$result = DB_query($sql);

In database, Status is getting changed, but in table it is not showing up.

//Updated

<script type="text/javascript" >
        $(function() {

            $(".delbutton").click(function() {
                var del_id = $(this).attr("id");
                var info = 'id=' + del_id;
                if (confirm("Sure you want to De-Activate this?.")) {
                    $.ajax({
                        type : "POST",
                        url : "DisableContact.php", //URL to the delete php script
                        data : info,
                         success: function(data) {
  var d = $.trim(data); //triming value if there is any whitespaces
  if (d == "A") {
    //means data is activate so show that button
    $("#"+del_id+ ".btn-success").show();
    //hiding other 
    $("#"+del_id +".btn-danger").hide();
  } else {
    //show deactivate buttton
    $("#"+del_id +".btn-danger").show();
    //hide other button
    $("#"+del_id +".btn-success").hide();
  }

}
                    });
                    $(this).parents(".record").animate("fast").animate({
                        opacity : "hide"
                    }, "slow");
                }
                return false;
            });
        });
 </script>

PHP

if($srow['status']=='A')
{
$sql = "UPDATE cust_contacts SET status='D' WHERE con_id=".$id;
echo 'A';
}
else
if($srow['status']=='D')
{
$sql = "UPDATE cust_contacts SET status='A' WHERE con_id=".$id;
echo 'D';   
}

$result = DB_query($sql);

Answer 1

You can pass some value from php to ajax call and depending on that the required button will get displayed.So your php code will look like below:

..
if($srow['status']=='A')
{
$sql = "UPDATE contacts SET status='D' WHERE con_id=".$id;
echo "D";//will get passed as response to ajax
}
else
if($srow['status']=='D')
{
$sql = "UPDATE contacts SET status='A' WHERE con_id=".$id;  
echo "A";//will get passed to ajax as response
}

Your ajax success function will look like below:

  ..
   success: function(data) {
  var d = $.trim(data); //triming value if there is any whitespaces
  if (d == "A") {
    //means data is activate so show that button
    $("#"+del_id+ ".btn-success").show();
    //hiding other 
    $("#"+del_id +".btn-danger").hide();
  } else {
    //show deactivate buttton
    $("#"+del_id +".btn-danger").show();
    //hide other button
    $("#"+del_id +".btn-success").hide();
  }

}

Update 1 :

As you have use if-else to show button so i forgot here that other button will not exist in this case thats the reason jquery is not able to find other button and display blank.Now, to solve this you need to make some changes in your php code where you are displaying your table.Changes you need to make are as follows:

Change this:

<?php if($ConRow['status']=='A') { ?>
<td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-danger btn-sm">De-Activate</button> </td>
<?php } else if($ConRow['status']=='D') { ?> 
<td><button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-success btn-sm">Activate</button> </td> 
<?php } ?>  

to below:

<td> <div class="<?php echo $ConRow['con_id']; ?>"> <?php if($ConRow['status']=='A') { ?>
<button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-danger btn-sm">De-Activate</button> 
<?php } else if($ConRow['status']=='D') { ?> 
<button id="<?php echo $ConRow['con_id']; ?>" class="delbutton btn btn-success btn-sm">Activate</button> 
<?php } ?> </div> </td>  

Now,in ajax success function we will use .html to add button inside <div></div> .So ajax will look like below:

if (d == "A") {
 $("." + del_id).html('<button id="' + del_id + '" class="delbutton btn btn-danger btn-sm">De-Activate</button>');
} else {
  $("." + del_id).html('  <button id="' + del_id + '" class="delbutton btn btn-success btn-sm">Activate</button> ');
}