Modals in Inertia
This episode is for members only

Sign up to access "Modals in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
07. A practical example with a form

Episodes

0%
Your progress
  • Total: 46m
  • Played: 0m
  • Remaining: 46m
Join or sign in to track your progress

Transcript

00:00
OK, let's build out a full practical example with something
00:04
that you would actually do. We saw this from the introduction. We've got a notes page just here with no notes. And we have a button that we can press to trigger a modal,
00:13
create a node, and then that mode will close and it will show the new node. So let's just take a look around what we already have here. I'm just going to go ahead and open up the notes index.
00:23
All this is doing is from the controller, passing down a list of nodes that we have in our database. It's iterating over them, otherwise just showing no notes. And we just have a link here, which
00:33
doesn't go through to anywhere at the moment. That will be where we implement our modal. So if we take a look at our routes at the moment, we have only got the notes index controller, which
00:43
is rendering out that page we've just looked at, passing down all of the notes we have in our app. And we have a notes store controller, which validates that the body of the node is required,
00:53
creates the node, and redirects it back to the notes page. So probably something that we've all seen before. But now we want to change the flow of this. Rather than having a form on this page,
01:04
we want the form to be within the modal itself. So let's go over it and start to create this out. The first thing I'm going to do is create out a controller for this.
01:12
So let's go ahead and make our controller here under our notes directory. And we're going to call this note create controller. So notice what we're doing with this is we're just
01:21
treating these like normal pages, but it shows a modal. You, of course, can have a normal page and a modal. You just need to create out two separate controllers. OK, so let's create that note create controller out.
01:33
And let's go ahead and just register a route for this. We'll call this notes create. And we'll reference that note create controller. And we'll do notes slash create.
01:44
So over in our controller, we already know how to invoke a modal now. So let's go down here and return using inertia. Instead of using, of course, render,
01:54
we use the modal method. And we are going to call this notes and create. And then we need that base route in here. So the base route for us is just going to be the notes index.
02:06
So if we land on this form that we're going to add inside this modal, the default route that we land on is going to be the notes route. OK, that's pretty much it for that.
02:16
We just need to create the modal out now. And we already know how to do that. So over in our JavaScript modals directory, let's create out a notes directory in here.
02:30
And let's create that create dot view modal. So again, it's going to be exactly the same as our example modal. We import this at the top.
02:40
And then we just use this wrapper. So let's go ahead and bring this in for speed. And we'll go ahead and create our template out. We'll go ahead and create our modal wrapper.
02:48
And this will be where we create our note. So that's pretty much all we need to do here. Let's go over and try this out. So we're going to hook this up to this button here.
02:57
So let's go over to our notes index. And here we just need to reference the route. So let's go ahead and reference route notes create. And that should invoke our modal.
03:08
So let's go over, click on this, and there we go. There is our new modal where we can add the functionality to create a new note. So now let's focus on the whole flow of this
03:18
and how this redirects and how it looks once we've created a new note. So we'll go over to our notes create modal that we've just created out.
03:27
And let's go ahead and just start to build out a form to submit this through. So we'll go ahead and just do this really roughly. We'll have an input in here with a type of text.
03:35
We'll just keep this really simple. And let's set an ID to body. We'll go ahead and introduce a label in here as well for that body.
03:44
And we'll just say note. We'll go ahead and hide this. We'll go ahead and just go with screen reader only. And then just underneath here,
03:52
let's go ahead and create a button with a type of submit and just say create note. So over on our form, let's go ahead and just space these out very quickly.
04:02
And we have something that looks like this. We'll just keep it like that for now. We'll just keep it really, really simple. So now we're just gonna do exactly what we would normally do
04:10
within Inertia and bring in our use form composable. So let's import that from Inertia view three. We go ahead and create our format just inside of here using use form.
04:20
And the body by default is gonna be null. We can go ahead and hook that up with a model down here. So V model form and body. And then when this form submits,
04:32
so we can do a V on submit prevent. We wanna go ahead and submit that form through to the correct place. So we'll just say post through to the notes store route
04:44
that we've already seen. And that should be pretty much it. That should create that out. Okay, let's just fix up this V model
04:50
that I've just noticed it says V modal, which of course is not what we want. And let's talk about the flow here. So if we go over to our note store controller,
04:58
we're actually creating this note that we saw earlier. We're redirecting back to the notes page. So that's the base notes page where we show everything. Just by redirecting, the URL is gonna change
05:10
and therefore that modal is no longer going to match that URL. So the modal will just be closed off. So really, we've not got much else to do.
05:18
If we head over to this notes page and we go over to new note and we type something in, just by redirecting, the URL is gonna change and therefore the modal will be closed off.
05:28
And of course, the nature of inertia means that it's making a request to this page again, fetching the new data and we see that just on the page there. So we can just create notes out here
05:38
and it will work in exactly the way that we'd expect. And of course, because we've been redirected, if we refresh, we're not gonna see that modal again. Until we specifically trigger it by clicking on that button.
05:48
So that's the whole flow and that's why I like this package because it's so simple to just create out a flow like this, redirect like you normally would and you've got your modal functionality there.
05:58
So that is a practical example of how we click to implement something like this where we can type something out, save it and be redirected back and see that new data.

Episode summary

In this episode, we get hands-on and build out a full practical example using a form inside a modal. We start with a simple notes page, which at first just lists notes (or shows "no notes" if there aren't any), and has a button intended to trigger a modal. Right now, that button doesn't do anything—so that's where we jump in!

First, we set up the appropriate backend controller and route to power the modal for creating a new note. Instead of just placing a form on the page, we structure things so that the form appears right inside the modal. We wire everything up: the modal opens when you click the button, it shows a simple form, and submitting this form creates the note on the backend and then redirects you back to the main notes page.

We walk through hooking the form up to Inertia's useForm composable, binding the input to form state, and handling the submission. Crucially, after creating a note, we rely on a redirect to the main index, which has the effect of closing the modal and showing our updated list of notes—with no manual cleanup required.

This demonstrates a really simple way to use modals for CRUD operations, and shows why the combination of routing, inertia, and modals makes for a super smooth user experience. By the end, you’ll see how easy it is to trigger modals, submit forms, and update your UI—all with minimal fuss.

Episode discussion

No comments, yet. Be the first!