Level 63
The shared data are shared with all the frontend.
Why do you need to share the flash message and not only pass it as a parameter to the loaded view ?
Aug 29, 2024
10
Level 2
Inertia - flash message, but only once
Let's say I want to flash a message in the layout for the users. I do it by adding this value to the session as $request->session()->flash('message', 'Hello'); and then either use it as shared data or I pass it manually to some of my pages props.
The problem is all of these solutions make the message persist the history navigation. What I mean is that if I go back in history and then go forward again, the message would appear again, as the props are part of the history data.
Is there any fancy built-in way to prevent the flashed message from being displayed again after going back and forward in history?
Level 2
@vincent15000 that's not what I'm asking.
1 like
Level 5
Level 2
@mes yay, thank you so much!
1 like
Level 2
@mes do you know if this can be done without manually closing the message? I'd like to somehow clear the data without "reloading" the route. My guess is that the only way to do that would be through history.replaceState() internally, but I'm not sure if there's any Inertia's helper for that.
Level 50
@beartown use JS. Add a state variable like errorVisible. When it's false, don't render the error element. You can set the variable to true when you get a new error, and use setTimeout to set it to false after a delay.
Level 2
@JussiMannisto why the delay though? It's fine to do it immediately.
Level 50
@beartown Uhh. So when you get a flashed message, it immediately closes? So the user sees nothing?
Level 2
@JussiMannisto no, it's about making sure that this message is no longer rendered from the history state. It has nothing to do with the app state itself. You won't update history via changing state anyway.
If I wanted the delay, I could use reload anyway.
Level 50
@beartown Oh I see what you're asking now. You can listen to popstate events like so:
addEventListener('popstate', (event) => {
// User navigated through history.
});
How you choose to use it is up to you.
Please or to participate in this conversation.