使用 sweetalert2 进行软删除的正确方法

Question

大家好，我正在使用 sweetalert2，这已经可以使用了，但是有一些错误需要修复。

错误：

当我点击 ok 时，location.reload() 将被触发而不会点击 "OK"。
当我点击取消时，模式仍然处于弹出模式。

这是我的脚本。

$('body').on('click','.delete-category',function(){
            deleteCategory();
        });

        function deleteCategory(id){

           var id = $('body').find('#categoryTable tbody tr.selected .catId').val();
           console.log(id);

            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then(function(isConfirm){
                if (isConfirm) {
                    $.ajax({
                        url: `/asset/category-delete/${id}`,
                        method: 'DELETE',
                        data: { _token: '{{ csrf_token()}}' },
                        success: function(data){
                            swal(
                                'Deleted!',
                                'Your file has been deleted.',
                                'success' 
                            );
                            location.reload();
                            },
                        error: function(err){
                            swal('Error!','Please report this issue.', 'error');
                        }
                    });
                } else {
                swal("Cancelled","", "error");
                }
            });
        }

寻求增强。

Answer 1

我找到了您可以通过下面给出的 HANDLING DISMISSALS link 来处理取消的示例

swalWithBootstrapButtons({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  reverseButtons: true
}).then((result) => {
  if (result.value) {
    swalWithBootstrapButtons(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  } else if (
    // Read more about handling dismissals
    result.dismiss === swal.DismissReason.cancel
  ) {
    swalWithBootstrapButtons(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

这个link对你有帮助

Answer 2

关于您的错误 #1：如果您希望在 swal 交互之后执行，则必须将 location.reload(); 放在 then() 方法中。

success: function(data){
  swal(
    'Deleted!',
    'Your file has been deleted.',
    'success' 
  ).then(()=>{
    location.reload();
  });
},

关于您的错误 #2：我不明白您在说什么 «删除模式»...

使用 sweetalert2 进行软删除的正确方法

Proper way to make a soft delete using sweetalert2

jquery

laravel-5

sweetalert2