Error with my controller and ajax function

Question

I used AJAX to create live search function, but I have meet the error on my controller. I think it's syntax error on the last td @method('DELETE'), I don't know how to fix it, can anyone help me ?

public function search(Request $request)
{
    $output = '';
    $users = User::where('name','LIKE','%'.$request->keyword.'%')->get();
    foreach($users as $user)
    {
        $output += '<tr>
        <td>
            <div class="d-flex px-2 py-1">
                <div>
                    <img src="'. asset('storage/users/' . $user->image) .'"
                        class="avatar avatar-sm me-3 border-radius-lg" alt="user1">
                </div>
                <div class="d-flex flex-column justify-content-center">
                    <h6 class="mb-0 text-sm">{{ $user->name }}</h6>
                    <p class="text-xs text-secondary mb-0">'. $user->email .'</p>
                </div>
            </div>
        </td>
        <td>
            <p class="text-xs font-weight-bold mb-0">'. $user->date_of_birth .'</p>
            <p class="text-xs text-secondary mb-0">'. $user->phone .'</p>
        </td>
        <td class="align-middle text-center">
            <span
                class="text-secondary text-xs font-weight-bold">'. $user->address .'</span>
        </td>
        <td class="align-middle">
            <form action="" method="POST">
                {{ csrf_field() }}
                @method('DELETE')
                <button class="btn btn-danger" data-toggle="tooltip"
                    data-original-title="Delete user" type="submit">Delete</button>
            </form>
        </td>
    </tr>';
    }

    return response()->json($output);
}

Answer 1

One clean solution to achieve what you need is to render the HTML as blade file using view('')->render() instead of building it on the controller

Create a new view file at resources/views/partials/user-search.blade.php and move your HTML to it

@foreach ($users as $user)
    <tr>
        <td>
            <div class="d-flex px-2 py-1">
                <div>
                    <img src="{{ asset('storage/users/'.$user->image) }}"
                        class="avatar avatar-sm me-3 border-radius-lg" alt="user1">
                </div>
                <div class="d-flex flex-column justify-content-center">
                    <h6 class="mb-0 text-sm">{{ $user->name }}</h6>
                    <p class="text-xs text-secondary mb-0">{{ $user->email }}</p>
                </div>
            </div>
        </td>
        <td>
            <p class="text-xs font-weight-bold mb-0">{{ $user->date_of_birth }}</p>
            <p class="text-xs text-secondary mb-0">{{ $user->phone }}</p>
        </td>
        <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-bold">{{ $user->address }}</span>
        </td>
        <td class="align-middle">
            <form action="" method="POST">
                {{ csrf_field() }}
                @method('DELETE')
                <button class="btn btn-danger" data-toggle="tooltip"
                    data-original-title="Delete user" type="submit">Delete</button>
            </form>
        </td>
    </tr>
@endforeach

then modify your Controller search method to something like:

public function search(Request $request)
{
    $users = User::where('name', 'LIKE', '%'.$request->keyword.'%')->get();

    $output = view('partials.user-search')->with(['users' => $users])->render();

    return response()->json($output);
}

Answer 2

Before I propose my fixes note that @ferhsom solution is a really a cleaner and better way to achieve what you need. But still the error in your code need to be pin pointed.

Errors

First the litteral string

Everything written between single quotes is considered as a string (literally) so no function call or variable will work. The following string as HTML will give you this: enter image description here:

'
<td>
    <form action="" method="POST">
        {{ csrf_field() }}
        @method("DELETE")
        <button type="submit">Delete</button>
    </form>
</td>
'

But what you need is hidden inputs with the keys _method and _token.

Second no Blade rendering

@method and @csrf are a Blade directives which will not make any sense if it doesn't pass through the rendering process.

Solution

Replace @method('DELETE') with:

'<input type="hidden" name="_method" value="DELETE">'

For @csrf or {{ csrf_field() }} do:

'<input type="hidden" name="_token" value="' . csrf_token() . '">'

Or

'' . csrf_field() . ''