Delete category with Sweet-alert message and Laravel 5.2

Question

I have Categories and sub categories listed in my view. I also have a delete category button, which does work, and deletes the category and all of its sub cateories. What I want to do is before deleting a Parent category, I want the sweet alert button to pop up and ask if your sure you want to delete this category, with a yes and no button? I know I have to use ajax probably to accomplish does, but Im Not so great with ajax. Right now this is what I have, and when I click the delete button it deletes the categories, but the sweet alert message doesn't show up.

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();
    }

}

My form:

 @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

And My sweet alert call:

<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>

Answer 1

Got it working, I had to do this for my sweet alert 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");
                    }
                });
    });

Thanks to maximl337 for the help!

Answer 2

Bind the click event to DOM instead of the element.

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

This also resolves issues with dynamically loaded elements, for eg: rendering action buttons after an ajax call.

Answer 3

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

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