Laravel 无法通过 SweetAlert 确认删除

Question

我在 Sweetalert 上遇到了这个问题 - 我有以下代码，但确认模式没有用，因为请求通过了它，用户甚至没有时间决定。我必须弄清楚停止请求执行并等待用户决定（确定/取消）。

代码如下：

<a href="{{route('notes.destroy', $note->id)}}" 
data-id="{{$note->id}}" onclick="confirmDelete('{{$note->id}}')" type="submit">
<span class="badge badge-danger">Delete</span></a>

这是 jQuery（我认为这是问题所在）：

<script>
function confirmDelete(item_id) {
    swal({ 
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover it!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            $('#' + item_id).submit();
        } else {
            swal("Cancelled Successfully");
        }
    });
}
</script>

Answer 1

在刀片文件中：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js"></script>

<form id="delete_from_{{$note->id}}" method="POST" action="{{ route('post.destroy', $note->id) }}">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}

    <div class="form-group">
        <a href="javascript:void(0);" data-id="{{$note->id}}" class="_delete_data">
            <span class="badge badge-danger">Delete</span>
        </a>                    
    </div>
</form>

js代码：

<script>
    $(document).ready(function(){
        $('._delete_data').click(function(e){
            var data_id = $(this).attr('data-id');
            Swal.fire({
                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((result) => {

                if (result.value) {
                    $(document).find('#delete_from_'+data_id).submit();
                }
            })
        });
    });            
</script>

Answer 2

如果我正确理解您的问题，您的意思是 sweetalert 模式没有为您提供在 onclick 事件之后是继续还是中止决定的任何选项。尝试如下添加“showCancelButton”和“confirmButtonText”，看看是否有什么不同。

swal({
    title: "Are you sure?",
    text: "Once deleted, you will not be able to recover it!",
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: 'ok'
}).then((willDelete) => {
    if (willDelete) {
        $('#' + item_id).submit();
    } else {
        swal("Cancelled Successfully");
    }
});

Answer 3

使用preventDefault()防止表单提交

function confirmDelete(event,item_id) {
event.preventDefault();
    swal({ 
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover it!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
    .then((willDelete) => {
        if (willDelete) {
            $('#' + item_id).submit();
        } else {
            swal("Cancelled Successfully");
        }
    });
}

<a href="{{route('notes.destroy', $note->id)}}" 
data-id="{{$note->id}}" onclick="confirmDelete(event,'{{$note->id}}')" type="submit">
<span class="badge badge-danger">Delete</span></a>
and here's the jQuery (which I think it's the problem):