'Laravel Yajra Datatable delete method not works

I am developing an application via Laravel 8 and Yajra Datatables.

So I have a dashboard with a table of users, and in the table there is the actions column with the buttons to view/edit/delete the user. To add this column with buttons I followed the following tutorial: datatable with button

But I have a problem...when I click on the delete button I get the 404 error ... I'm not sure, but I think the problem may come from the way I generate the button.

Do you have any suggestions or advice? I also inserted a dump-and-die inside the destroy method but as you can guess it doesn't return anything by not reaching it.

My Code:

  • UserController -> index method:
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     * @return Renderable
     */
    public function index(Request $request)
    {
        $user = User::select('id', 'name', 'email', 'email_verified_at', 'created_at')->get();
        if($request->ajax()){
            return Datatables::of($user)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
                           $btn = '<a href="/user/detail/'.$row['id'].'" class="edit btn btn-info btn-sm">View</a>';
                           $btn = $btn.'<a href="/user/edit/'.$row['id'].'" class="edit btn btn-primary btn-sm" id="edit">Edit</a>';
                           $btn = $btn.'<form action="/user/delete" method="POST"><input type="hidden" name="_token" value="{{ @csrf() }}" /><input type="hidden" name="_method" value="{{ @method("delete") }}" />
                           <input type="hidden" class="form-control" name="idu" value="'.$row['id'].'"><input type="submit" class="edit btn btn-danger btn-sm" value="Delete" /></form>';
         
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);

        }
        return view('user::index');
    }
}
  • Route:
//rotte USER module with CRUD route
Route::middleware(['auth'])->prefix('user')->group(function() {
    Route::get('/', 'UserController@index'); //dashboard -> lista utenti
    Route::get('/detail/{idu}', 'UserController@show'); // dettaglio specifico utente
    Route::get('/edit/{idu}', 'UserControlelr@showEditForm'); // form edit utente con dato idu
    Route::patch('/edit', 'UserController@edit'); // scrivere le modifiche sul DB
    Route::delete('/delete', 'UserController@destroy'); // eliminare utente dal DB
    Route::get('/create', 'UserController@showCreateForm'); // form creazione nuovo utente
    Route::post('/create', 'UserController@create'); // creare l'utente sul DB
});

  • index.blade.php
@extends('user::layouts.master')

@section('content')
<script>
    $(function() {
       var table =  $('#dtUserList').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ url('user') }}',
            columns: [
                { data: 'id', name: 'id', visible: false },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'email_verified_at', name: 'email_verified_at'},
                { data: 'created_at', name: 'created_at' },
                {data: 'action', name: 'action', orderable: false, searchable: false },
            ],
            order: [[0, 'asc']]
        });
    });

</script>
<div class="container">
    @if (\Session::has('error'))
    <div class="alert alert-danger">
        <ul>
            <li>{!! \Session::get('error') !!}</li>
        </ul>
    </div>
    @endif
    @if (\Session::has('success'))
    <div class="alert alert-success">
        <ul>
            <li>{!! \Session::get('success') !!}</li>
        </ul>
    </div>
    @endif
    <h2>User List - Modulo nWidart User</h2>
    <table class="table table-bordered" id="dtUserList">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Verificata</th>
                <th>Created</th>
                <th>Action</th>
            </tr>
        </thead>
    </table>
</div>
@endsection


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source