Laravel-datatables: [Ask]action edit delete from with restfull controller and eloquent

Created on 15 Dec 2015  路  8Comments  路  Source: yajra/laravel-datatables

Hy yajra, great work,
i've trying to make action column Edit and Delete, but in Delete it's return token missmatch,
here my controller

public function data() {
$news = DB::table('news')
->join('users', 'news.user_id', '=', 'users.id')
->select(['news.id', 'news.title', 'news.image', 'users.name']);

    return Datatables::of($news)
                    ->addColumn('action', function ($id) {
                        return '<a href="news/' . $id->id . '/edit" class="btn btn-primary">Edit</a>&nbsp;
                               <form method="POST" action="news/' . $id->id . '" accept-charset="UTF-8">
                                    <input name="_method" type="hidden" value="DELETE">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input class="btn btn-danger" type="submit" value="Delete">
                                </form>';
                      })->make(true);}

In restfull controller to delete we need csrf token, but how to add it into my delete form?

Or you have another method to make this action?

Most helpful comment

Hy @yajra thank for help, it's work now, i change the js event into like this

$('#news-table').DataTable().on('click', '.btn-delete[data-remote]', function (e) {

All 8 comments

What I usually do is to implement the delete via an ajax request. I have this global delete button script that handles the delete call.

<button class="btn-delete" data-remote="/users/1">Delete</button>
$(tables).DataTable().$('.btn-delete[data-remote]').on('click', function (e) {
    e.preventDefault();
    var url = $(this).data('remote');
    // confirm then
    $.ajax({
        url: url,
        type: 'DELETE',
        dataType: 'json',
        data: {method: '_DELETE'}
    }).always(function (data) {
        $(tables).DataTable().draw(false);
    });
});

But you need to implement this http://laravel.com/docs/5.1/routing#csrf-x-csrf-token too for it to work.

it's not work yet, maybe in my code implementation, can you tell me in what i'm wrong
this is my controller:

    public function data() {
        $news = DB::table('news')
                ->join('users', 'news.user_id', '=', 'users.id')
                ->select(['news.id', 'news.title', 'news.image', 'users.name']);
    return Datatables::of($news)
                ->addColumn('action', function ($id) {
                   return '<a href="news/' . $id->id . '/edit" class="btn btn-primary">Edit</a>
                       <button class="btn btn-danger" data-remote="/news/' . $id->id . '">Delete</button>
                  '; })->make(true);}

this is my js:

var table = $('#news-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('news.data') !!}',
        columns: [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            {data: 'id', name: 'news.id'},
            {data: 'title', name: 'news.title'},
            {data: 'name', name: 'users.name'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        order: [[1, 'asc']]
    }).$('.btn btn-danger[data-remote]').on('click', function (e) {
        e.preventDefault();
        var url = $(this).data('remote');
        // confirm then
        $.ajax({
            url: url,
            type: 'DELETE',
            dataType: 'json',
            data: {method: '_DELETE'},
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        }).always(function (data) {
            $(tables).DataTable().draw(false);
        });
    });
    ;

@yajra are you still in? please help me

@akhid1000, can you inspect element and paste the error log on your console?

Found something. Your selector is incorrect:

$('.btn btn-danger[data-remote]');
// should be
$('.btn.btn-danger[data-remote]')

@yajra i have fix my selector, i check my console log too, there is no error in my console, but when i click delete button it's nothing happen, it's like my ajax not running

If nothing happens then the event binding was not properly attached on your DOM button. What I usually do is to test the js events by doing a simple alert. Start by making sure the click event is being fired.

$('.btn-danger[data-remote]').on('click', function (e) { alert('test') }

Hy @yajra thank for help, it's work now, i change the js event into like this

$('#news-table').DataTable().on('click', '.btn-delete[data-remote]', function (e) {
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jackrsantana picture jackrsantana  路  3Comments

hari-web picture hari-web  路  3Comments

techguydev picture techguydev  路  3Comments

SGarridoDev picture SGarridoDev  路  3Comments

jgatringer picture jgatringer  路  3Comments