In my application using Inertia/Laravel/VueJs, I have a page displaying numerous posts where each post can be marked as completed. Upon marking a post as completed on the front-end, a CSS class should toggle to indicate completion.
The desired behavior is for a user to scroll down the page, click the completed button, and have the back-end send updated data to the front-end without causing the page to jump to the top.
Although the code below enables updating the database upon clicking the completed button, it does not reflect the new data in the front-end:
Controller:
public function markAsCompleted(Request $request)
{
$post = Post::find($request->id);
$post->completed = true;
$post->save();
return Redirect::route('posts');
}
Javascript function triggered by the completed button click:
completed(id) {
this.completedForm.put(`/endpoint/completed/${id}`, {
preserveScroll: true
});
},
By modifying the Javascript function as shown below:
completed(id) {
this.completedForm.put(`/endpoint/completed/${id}`, {
preserveScroll: true,
onSuccess: () => {
Inertia.get('posts');
},
});
},
The updated data reflects on the front-end with the post marked as completed, but unfortunately, the preserveScroll feature does not function as intended, resulting in the user being redirected to the top of the page.
I'm seeking suggestions on how to achieve my desired functionality as users may have hundreds of posts, making it impractical for the page to constantly scroll to the top. Any insights would be greatly appreciated!