Tengo una lista de empleados y cada uno tiene un botón de operación de eliminación y estoy usando la biblioteca jquery-confirm.js pero cuando hago clic en el botón Eliminar aparece una ventana emergente de confirmación y desaparece inmediatamente después de unos segundos sin hacer clic en ningún botón. aquí está el código js de la ventana emergente
$('.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 () { } } } }); });y aquí está el botón de eliminar:
<td><a href="{{route('employee.delete',$employee->id)}}" class="deleteBtn"><i class="icon-trash"></i></a></td>Cuando hace clic en este botón, va a esa ruta y actualiza la página, debe usar ajax como a continuación, cambie su botón a:
<a id="{{$employee->id)}}" class="deleteBtn"><i class="icon-trash"></i></a> y tu código js :
$('.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 () { } } } });