405 (Method Not Allowed) error on a DELETE Ajax Request in Laravel

Question

I know there are several posts about 405 Errors from using AJAX delete. However, none of the solutions from the posts I found worked for me.

I have a view with a table displaying all the products from my database table. On each row there is a delete button to delete the product like so:

{!! Form::open(['method' => 'DELETE', 'route' => ['slider.destroy', $slide->id]]) !!}
    <button type="button" class="deleteproductModal btn btn-xs btn-default btn-flat"
            data-toggle="modal"
            data-product_token="{{ csrf_token() }}"
            data-product_name="{{ $slide->title_slider }}"
            data-product_destroy_route="{{ route('slider.destroy', $slide->id) }}">
        <i class="fa fa-trash"></i>
    </button>
{!! Form::close() !!}

On button click, the following javascript executes which calls the destroy method in the controller to delete the product from the database:

$('button.deleteproductModal').click(function()
{
    var productRoute = $(this).attr("data-product_destroy_route");
    var productName = $(this).attr("data-product_name");
    var productToken = $(this).attr("data-product_token");
    deleteproduct(productRoute, productToken, productName);
});

function deleteproduct(productRoute, productToken, productName)
{
    swal({
        title: "Window product Deletion",
        text: "Are you absolutely sure you want to delete " + productName + "? This action cannot be undone." +
        "This will permanently delete " + productName + ", and remove all collections and materials associations.",
        type: "warning",
        showCancelButton: true,
        closeOnConfirm: false,
        confirmButtonText: "Delete " + productName,
        confirmButtonColor: "#ec6c62"
    }, function()
    {
        $.ajax({
            type: "DELETE",
            url: productRoute,
            headers: { 'X-CSRF-TOKEN' : productToken }
        })
            .done(function(data)
        {
            swal("Window Product Deleted!", productName + " Window Product was successfully delete.", "success");
        })

            .error(function(data)
        {
            swal("Oops", "We couldn't connect to the server!", "error");
        });

    });
}

My controller is a resource controller. Here is the route:

Route::resource('slider','Backend\SliderController');

Here is the destroy method from the controller being called.

public function destroy($id)
{
    $home= Slider::find($id);

    unlink($home->featured_image);

    $home->delete();
    notify()->flash('<h3>Deleted successfully</h3>', 'success', ['timer'=>2000]);
    return redirect('slider');

}

when i delete the product i get oops we couldnt connect to the server sweet alert error but when i fresh the page the data is deleted....any help?

Answer 1

You have to set ajax type POST but send a parameter named _method with value delete like this:

$.ajax({
        type: "POST",
        data:{
         _method:"DELETE"
        },
        url: productRoute,
        headers: { 'X-CSRF-TOKEN' : productToken }
    });

Or because you use laravel html form helper so it generates _method hidden input automatically so you'd better send all your form inputs such as token and method like this:

 function()
{

    var formData=$('#yourForm').serialize();
    $.ajax({
        type: "POST",
        url: productRoute,
        data:formData
    })
      .
      . 

});