Laravel dosent delete record via ajax?

Question

I'm trying to delete record using ajax, in laravel 5.4, I know this is one of the common questions and there are already lots of online solutions and tutorials available about this topic. I tried some of them but most of giving me the same error NetworkError: 405 Method Not Allowed. I tried to do this task by different angle but I'm stuck and could not found where I'm wrong, that's why I added this question for guideline.

I'm trying the following script for deleting the record.

IN Route:

    Route::delete('article/delete/{article}', 'ArticleController@delete_article')->name("delete_article");

In Controller:

    public function delete_article($id)
    {
        article::where('id', $id)->delete($id);

        return response()->json([
            'success' => 'Record deleted successfully!'
       ]);
    }

IN View:

    <li name="csrf-token" content="{{ csrf_token() }}">
        <a class="deleteRecord" href="/admin/article/delete/{{$article->id}}">
            <i class="icon-bin"></i>delete
        </a>
    </li>

Ajax Code is:

    $(".deleteRecord").click(function(){
        var id = $(this).data("id");
        var token = $("meta[name='csrf-token']").attr("content");

        $.ajax({
            url: /admin/article/delete/{{article}},
            type: 'DELETE',
            data: {
                "id": id,
                "_token": token,
            },
            success: function (){
                console.log("it Works");
            }
        });

    });

As you can See it seems everything is right but I don't know why it doesn't work correctly? please help me, guys.

Answer 1

This is work for me: In Route

Route::post('/article/delete', 'ArticleController@delete_article');//Ajax Routes

IN Controller

public function delete_article(Request $request)
    {
        $id=$request['id'];
        article::where('id', $id)->delete();
        return response()->json(['articleDelete' => 'success']);
    }

in View:

<td>
<a class="deleteRecord" data_id="{{$article->id}}">
<i class="icon-bin" style="color: black"></i></a>
</td>

In AJAX:

$(".deleteRecord").each(function () {
            $(this).on("click", function () {
                var $tr = $(this).closest('tr');
                var id = $(this).attr("data_id");
                swal({
                    title: "Are you sure to Delete!",
                    text: "***",
                    icon: "warning",
                    buttons: [
                        'cansle!',
                        'yes'
                    ],
                    dangerMode: true,
                }).then(function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: '/admin/article/delete',
                            type: 'post',
                            dataType: 'json',
                            data: {_token: "{{csrf_token()}}" , id:id},
                            success: function () {
                                swal({
                                    title: "article deleted succesfuly",
                                    icon: "success",
                                    type: 'success',
                                })
                                $tr.find('td').fadeOut(1000,function(){
                                    $tr.remove();
                                });
                            }
                        })
                    }
                })
            });
        });

Answer 2

You are doing wrong in many places. Try this

Route

Route::delete('article/delete/{article}', 'ArticleController@delete_article')->name("delete_article");

Controller

public function delete_article($article)
    {
        article::where('id', $article)->delete();
        return response()->json([
            'success' => 'Record deleted successfully!'
        ]);
    }

View

<button class="deleteRecord" data-id="{{$article->id}}"><i class="icon-bin"></i>delete</button>

AJAX

$(".deleteRecord").click(function(){
    var id = $(this).data("id");
    var token = $("meta[name='csrf-token']").attr("content");

    $.ajax({
        url: "article/delete/"+id,
        type: 'POST',
        dataType: 'json',
        data: {
            _method: 'DELETE',
            submit: true,
            _token: token,
        },
        success: function (){
            console.log("it Works");
        }
    });   
});

Answer 3

The problem (as far as I can see) lies here:

<a class="deleteRecord" href="/admin/article/delete/{{$article->id}}">

In your view, you make a variable named id and the value is based on data-id attrribute.

var id = $(this).data("id");

But in your a tag you don't have data-id attribute. So you have to add it (something like this):

<a class="deleteRecord" href="/admin/article/delete/{{$article->id}}" data-id="{{$article->id}}">

Also in your ajax call, teh url is incorrect (based on what you have defined in routes:

Ajax call:

url: "article/"+id

Route:

article/delete/{article}

So either change the route:

article/{article}

or change the ajax call:

url: "article/delete/"+id

And one more thing. You have to prevent default a tag action. change the event like this:

$(".deleteRecord").click(function(event){
    event.preventDeault();