php + ajax without page refresh

Viewed 89

I am trying to update a status in my users table - when a user click on a button I used ajax to send it to the the php page but on response the page reload because I used `location.reload();. Is there a way i could make the button change its status without reloading the page?

The buttons:

<i data="<?php echo $row['id'];?>" class="status_checks btn <?php echo ($row['payment_status'])? 'btn-success' : 'btn-danger'?>"><?php echo ($row['payment_status'])? 'Paid' : 'Unpaid'?></i>   

php that update the database

<?php 
extract($_POST);
$user_id=$db->real_escape_string($id);
$status=$db->real_escape_string($status);
$sql=$db->query("UPDATE users SET payment_status='$status' WHERE id='$id'");
echo $sql;

?>

and finally, the jquery

<script type="text/javascript">
$(document).on('click','.status_checks',function(){
var status = ($(this).hasClass("btn-success")) ? 'Unpaid' : 'Paid';
var msg = (status=='Unpaid')? 'Unpaid' : 'Paid';
if(confirm("Are you sure to "+ msg)){
    var current_element = $(this);
    url = "update.php";
    $.ajax({
    type:"POST",
    url: url,
    data: {id:$(current_element).attr('data'),status:status},
    success: function(data)
        {   
            location.reload();
        }
    });
    }      
});
</script>
2 Answers
Related