This episode is for members only
Sign up to access "Installing Inertia from Scratch" right now.
Get started
Already a member? Sign in to continue
Playing
13. Form callbacks and resetting the form
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
We saw in the last episode that if we go ahead and post something successfully, it doesn't really look like anything has happened, even though it has.
00:07
Now, eventually, we're going to get our list of posts down here. So we will see that roll in. But what we really want to do is update what happens when we have a successful form post.
00:18
And there's a couple of things, a couple of options that we can add to here. But for now, we're going to look on success. You can see there that via that we've got on cancel, on error, on finish, everything that we could possibly need to control our forms.
00:33
But we're interested in on success just for now. So on success, we might want to do a number of number of things. We might want to flash a message to show that this has been posted. But at the moment, what we want to do is just reset the form.
00:48
What we can do is say form reset, and that's going to reset this back to the original values that we've provided here. So effectively, that will just clear the form out for us. If we had other things that we could post in here as well,
01:02
they would also be returned back to their defaults. So that makes it a little bit nicer when we type something, hit post, that form gets cleared out, ready for the next message. So we've now posted two things.
01:15
And now I'm going to get rid of them just for now. There are other things that we can do in here as well. And I'm going to show you one of these, because this is probably something that you're going to use very often.
01:24
So the first thing I'm going to do is just set a height on here of some random value. So let's just say a thousand pixels just so we get a little bit of scroll. I'm actually going to increase that a little bit more here.
01:36
OK, so the next really important thing that you're probably going to always include when you post forms is preserve scroll. Now, if we explicitly set this to false, let's just look what happens
01:50
if we scroll down a little bit, assuming our form is maybe a little bit further down on the page, maybe underneath the content. If I type something and hit post, you can see that we jump back up to the top of the page.
02:03
That's a normal thing because the content is being re-rendered and it would jump you to the top of the page. And that's pretty standard. But what we really want to do is preserve the scroll.
02:12
So wherever the form is on the page, this always stays in the same position. It feels more like an app rather than a refresh of the entire page. So if I go ahead and type this now and hit post, you can see we stay in exactly exactly the same position.
02:27
So that's probably really useful if you have forms further down the page or if you have some sort of button that does something and you don't want the user to be jumped to the very top of the page every single time.
02:38
So now that we've demoed that, I'm just going to go ahead and get rid of this height in here that we just used to demo that. And let's go ahead and look in the next episode outputting all of the posts from the database.
14 episodes•1 hr 7 mins•1 year ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.