使用 Sweet-alert 消息和 Laravel 5.2 删除类别答案

【问题标题】：Delete category with Sweet-alert message and Laravel 5.2使用 Sweet-alert 消息和 Laravel 5.2 删除类别
【发布时间】：2016-07-23 09:56:35
【问题描述】：

我的视图中列出了类别和子类别。我还有一个删除类别按钮，它确实有效，并删除了类别及其所有子类别。我想要做的是在删除父类别之前，我希望弹出甜蜜警报按钮并询问您是否确定要删除此类别，带有是和否按钮？我知道我可能必须使用 ajax 来完成，但我对 ajax 不是很好。现在这就是我所拥有的，当我单击删除按钮时，它会删除类别，但不会显示甜蜜的警报消息。

Route.php

/** Delete a category **/
    Route::delete('admin/categories/delete/{id}', [
        'uses' => '\App\Http\Controllers\CategoriesController@deleteCategories',
        'as'   => 'admin.category.delete',
        'middleware' => ['auth'],
    ]);

CategoriesController.php：

class CategoriesController extends Controller { 

    /** More function here, just hidden for ease right now **/


    /**
     * Delete a Category
     *
     * @param $id
     * @return \Illuminate\Http\RedirectResponse
     */
    public function deleteCategories($id) {
        // Find the category id and delete it from DB.
        Category::findOrFail($id)->delete();

        // Then redirect back.
        return redirect()->back();
    }

}

我的表格：

 @foreach ($categories as $category)

 {{ $category->category }}

<form method="post" action="{{ route('admin.category.delete', $category->id) }}" class="delete_form">
      {{ csrf_field() }}
      <input type="hidden" name="_method" value="DELETE">
      <button id="delete-btn">
           <i class="material-icons delete-white">delete_forever</i>
      </button>
</form>

@endforeach

还有我甜蜜的警报电话：

<script type="text/javascript">
    $('#delete-btn').on('click', function(e){
        e.preventDefault();
        var self = $(this);
        swal({
                    title: "Are you sure?",
                    text: "All of the sub categories will be deleted also!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: true
                },
                function(isConfirm){
                    if(isConfirm){
                        swal("Deleted!","Category and all sub categories deleted", "success");
                        setTimeout(function() {
                            self.parents(".delete_form").submit();
                        }, 2000);
                    }
                    else{
                        swal("cancelled","Your categories are safe", "error");
                    }
                });
    });
</script>

【问题讨论】：

您在控制台中看到任何错误吗？
不，我没有，我想我必须在isConfirm函数中使用ajax，但我不知道如何
尝试在控制台中调试以查看事件是否触发。 console.log("check");
尝试将点击事件绑定到dom $(document).on('click', '#delete-btn', function(e) { ... });
另外，如果我可以提出建议，如果您正在循环类别，请将删除按钮放入一个类中。如果将其保留为 id，则会遇到问题，因为每个 html 页面只能有 1 个具有相同名称的 id。只是我的 0.02 美元

标签： javascript php ajax laravel laravel-5.2

【解决方案1】：

将点击事件绑定到 DOM 而不是元素。

$(document).on('click', '#delete-btn', function(e) { ... });

这也解决了动态加载元素的问题，例如：在 ajax 调用之后呈现操作按钮。

【讨论】：

【解决方案2】：

让它工作，我必须为我的甜蜜警报 JavaScript 这样做：

$(document).on('click', '#delete-btn', function(e) {
        e.preventDefault();
        var self = $(this);
        swal({
                    title: "Are you sure?",
                    text: "All of the sub categories will be deleted also!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: true
                },
                function(isConfirm){
                    if(isConfirm){
                        swal("Deleted!","Category and all sub categories deleted", "success");
                        setTimeout(function() {
                            self.parents(".delete_form").submit();
                        }, 1000);
                    }
                    else{
                        swal("cancelled","Your categories are safe", "error");
                    }
                });
    });

感谢 maximl337 的帮助！

【讨论】：

【解决方案3】：

在 DOM 节点上使用提交事件而不是 jquery 对象：

$('.delete_form')[0].submit();

【讨论】：

什么都不做