Inertiajs - Laravel: Avoid Scroll after Post and Set Header

user_17349773 0
Viewed 311

On my index page I have made a chatbox. There I have a form element in my Vue component which executes an inertia post via "UseForm".

The problem I have is, because I make the post on "/chatbox/send", that I have to make a redirect to "index/home" afterwards, because otherwise the URL-header remains "/chatbox/send", which I don't want.

In addition, the page automatically scrolls up again when rendering.

My question; How can I re-render the page so that the URL-header is set to "/home" again and the page does not scroll up ?

public function sendChatMessage(Request $request) {
    $msg = $request->input('text');
    $username = Auth::user()->only('name')['name'];

    if($this->createChatMessage($msg, $username)) {
        return redirect('index/home');
    }

    return false;
}
inertiajs laravel vue.js php
1 Answers

you have to define it during your route in your vuejs I suppose you use.

Normally it should look like this:

this.$inertia.post(route('chatbox.send'), {text: this.text}, { preserveState: false, preserveScroll: true })

preserveState: it is used to say if you want to refresh the page if you return the same route in your php controller.

preserveScroll: is used to say that you want to stay at the same scrolling as at the time of the send.

more information: https://inertiajs.com/manual-visits

And in your controller I would do:

public function sendChatMessage(Request $request) {
  $msg = $request->input('text');
  $username = Auth::user()->only('name')['name'];

  if($this->createChatMessage($msg, $username)) {
    return redirect()->route('home');
  }
}
user_113687840
Related