Laravel 5.2 - Sweet Alert 确认框

Question

我在视图中列出了类别。视图中也有一个删除类别按钮，它可以工作并在单击时删除类别。

我想做的是在删除类别之前，弹出一个甜蜜的警告对话框并要求确认。如果确认，应该去定义的路由，删除类别。

删除link定义如下：

<a id="delete-btn" href="{{ route('admin.categories.destroy', $category->id) }}" class="btn btn-danger">Delete</a>

脚本定义如下：

<script> 
    $(document).on('click', '#delete-btn', function(e) {
        e.preventDefault();
        var link = $(this);
        swal({
            title: "Confirm Delete",
            text: "Are you sure to delete this category?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: true
         },
         function(isConfirm){
             if(isConfirm){
                window.location = link.attr('href');
             }
             else{
                swal("cancelled","Category deletion Cancelled", "error");
             }
         });
    });
</script>

但是，当我单击删除按钮时，它会删除类别，但不会显示温馨提示消息。

路由定义如下：

Route::get('/categories/destroy/{category}', [
    'uses' => 'CategoriesController@destroy',
    'as' => 'admin.categories.destroy',
]);

控制器函数定义为：

public function destroy(Category $category) 
{

    $category->delete();

    //this alert is working fine. however, the confirmation alert should appear 
    //before this one, which doesn't
    Alert::success('Category deleted successfully', 'Success')->persistent("Close");

    return redirect()->back();
}

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

按以下方式编写锚点。

 <a href="#" customParam="URL">Delete</a>

现在 URL select 将 href 更改为 customParam。

function (isConfirm) {
    if (isConfirm) {
        window.location = link.attr('customParam');
    } else {
        swal("cancelled", "Category deletion Cancelled", "error");
    }
}

基本上在您的情况下，href 和事件监听器都处于点击状态。

Answer 2

试试这个：

<script>
    var deleter = {

        linkSelector : "a#delete-btn",

        init: function() {
            $(this.linkSelector).on('click', {self:this}, this.handleClick);
        },

        handleClick: function(event) {
            event.preventDefault();

            var self = event.data.self;
            var link = $(this);

            swal({
                title: "Confirm Delete",
                text: "Are you sure to delete this category?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: true
            },
            function(isConfirm){
                if(isConfirm){
                    window.location = link.attr('href');
                }
                else{
                    swal("cancelled", "Category deletion Cancelled", "error");
                }
            });

        },
    };

    deleter.init();
</script>

编辑：根据您对@kalyan-singh-rathore 的回答的评论，我认为您没有在blade 模板中正确注入脚本。如果您要扩展基本布局，请确保您已包含脚本或从 child 布局生成脚本。

Answer 3

试试这个对我有用的:)

    document.querySelector('#promote').addEventListener('submit', function (e) {
        let form = this;

        e.preventDefault(); // <--- prevent form from submitting

        swal({
            title: "Promote Students",
            text: "Are you sure you want to proceed!",
            type: "warning",
            showCancelButton: true,
            // confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, I am sure!',
            cancelButtonText: "No, cancel it!",
            closeOnConfirm: false,
            closeOnCancel: false,
            dangerMode: true,
        }).then((willPromote) => {
            e.preventDefault();
            if (willPromote.value) {
                form.submit(); // <--- submit form programmatically
            } else {
                swal("Cancelled", "No students have been promoted :)", "error");
                e.preventDefault();
                return false;
            }
        });
    });

Laravel 5.2 - Sweet Alert 确认框

Laravel 5.2 - Sweet Alert confirmation box

javascript

php

jquery

laravel-5

sweetalert