POST requests with Blade fragments + htmx - best practice

I am using htmx and blade fragments to dynamically save and refresh data in my table. Everything works, but due to lack of documentation and further knowledge on this topic I think I am using the wrong way to achieve what I want.

Here's my table (stripped of classes etc. for readability) and at the bottom is my button I use to send the post request to save all users.

<table>
    @fragment('user-table')
        <tbody id="hx-user-table">
            @foreach ($users as $user)
                <tr>
                    <td>
                        <div>
                            <input type="checkbox" value="{{$user->id}}" name="users[]">
                            <label>
                                {{$user->name}} {{$user->surname}}
                            </label>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    @endfragment
</table>

<button hx-post="{{route('group.update_users',  $group->id)}}" hx-target="#hx-user-table" hx-swap="outerHTML" hx-include="[name='_token'], [name='users[]']">save</button>

What I want to achieve is to send the post request to update all users and then somehow get back the updated data and use that in my fragment.

As of right now my controller looks like this:

public function index(Request $request)
{
    // getting user data stuff

    return view('group.users')->with('users', $users)->with('group', $group)
    ->fragmentIf($request->hasHeader('HX-Request'), 'user-table');
}

public function update(Request $request)
{
    //updating user stuff

    return $this->index($request);
}

As you can see I am calling the index function inside my update function to return the fragment. This doesn't really feel right. Is there a better way to achieve this or how to work with htmx and laravel? Thank you all!

Buther

2 years ago

Level 1

When using htmx and Laravel, there are different approaches you can take to achieve your desired functionality without relying on calling the index function from the update function. Here are a couple of suggestions:

Use a dedicated route and method for handling the update request: Instead of calling the index function from the update function, you can create a separate route and method specifically for handling the update request. This way, you can handle the update logic independently and return the updated user data as a JSON response. Your JavaScript code can then update the table based on the received data.

public function updateUsers(Request $request, $groupId) { // Update user data logic

// Return updated user data as JSON response
return response()->json(['users' => $updatedUsers]);

}

In your JavaScript code, you can make an AJAX request to this dedicated route and update the table based on the received JSON response.

Use a partial view for the user table: Instead of using a blade fragment, you can create a separate partial view for the user table. This partial view can be included in both the initial rendering of the page and the AJAX response. This way, you can update the user table without relying on the fragment approach. Example:

Create a partial view (e.g., user-table.blade.php) that contains the table markup:

In your main view, include the partial view:

Then, in your controller, return the updated partial view as a response:

public function updateUsers(Request $request, $groupId) { // Update user data logic

// Return updated user table as a partial view
return response()->view('user-table', ['users' => $updatedUsers])->header('HX-Trigger', 'true');

}

Make sure to include the HX-Trigger header in the response to indicate to htmx that an update is needed.

By using these approaches, you can handle the update logic separately and update the user table dynamically without relying on calling the index function from the update function. Choose the approach that suits your needs and the structure of your application. https://www.mymilestonecard.biz/

Please or to participate in this conversation.