I have a list of employees and each has a delete operation button and i am using jquery-confirm.js library but when i click delete button confirmation popup appears and immediately disappears after a few seconds without clicking any button. here is the js code of the pop up
$('.deleteBtn').on('click',function () {
$.alert({
title: 'تایید حذف',
content: 'آیا میخواهید این کارمند حذف شود؟',
rtl: true,
closeAnimation: 'scale',
useBootstrap:true,
closeIcon: true,
buttons: {
confirm: {
text: 'تایید',
btnClass: 'btn-blue',
action: function () {
$.alert('تایید شد.');
}
},
cancel: {
text: 'انصراف',
action: function () {
}
}
}
});
});
and here is the delete button:
<td><a href="{{route('employee.delete',$employee->id)}}" class="deleteBtn"><i class="icon-trash"></i></a></td>
When you click on this button it goes to that route and refreshes the page, you should use ajax like below change your button to:
<a id="{{$employee->id)}}" class="deleteBtn"><i class="icon-trash"></i></a>
and your js code:
$('.deleteBtn').on('click',function () {
let id = $(this).attr('id');
$.alert({
title: 'تایید حذف',
content: 'آیا میخواهید این کارمند حذف شود؟',
rtl: true,
closeAnimation: 'scale',
useBootstrap:true,
closeIcon: true,
buttons: {
confirm: {
text: 'تایید',
btnClass: 'btn-blue',
action: function () {
$.ajax({
type: "get",
url: "{{route('employees.delete')}}",
data: {
'id': id
},
success: function (msg) {
alert('انجام شد!')
}
});
}
},
cancel: {
text: 'انصراف',
action: function () {
}
}
}
});