I want to change a specific row appearance after AJAX call success. My table is dynamically generated from the database data.
This is a row in my table. When the Approve button is clicked, AJAX request goes to the database. In the success response, I want to change the Approve button text as Approved and disable button. Also reduce the opacity of that row to look like that row is disabled. I used jquery to do that, but it didn't work.
below is the full code of my AJAX request.
$(document).on('click', '#approveBtn', function(e) {
e.preventDefault();
Swal.fire({
title: 'Are you sure to Approve?',
text: 'Approve Appointment',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Approve'
}).then((result) => {
if (result.value) {
$.ajax({
type: "GET",
url: '/approve_appointment',
data: {
appointment_id: $(this).val(),
customer_id: $(this).attr("customer_id")
},
})
.done(function(res) {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
})
if (res == 'already_added') {
Toast.fire({
type: 'error',
title: 'Already approved!'
})
} else {
Toast.fire({
type: 'success',
title: 'Appointment has been Approved!'
})
//$(this).html("Approved")
//$("#pending_list").find("button").val($(this).val());
let appointment_id = $(this).val();
$("#pending_list").find("[value = " + appointment_id + "]").html("Approved");
/*setTimeout(function(){
location.reload();
}, 1200)*/
}
})
.fail(function(err) {
Toast.fire({
type: 'error',
title: 'Appointment Approve failed!'
})
});
}
})
});
below is the code part I tried to change stuff
//$(this).html("Approved")
//$("#pending_list").find("button").val($(this).val());
let appointment_id = $(this).val();
$("#pending_list").find("[value = " + appointment_id + "]").html("Approved");
I don't have any idea about advance jquery to archive this..
Thanks in Advance, if you can help me!