Building Modals in Livewire
This episode is for members only

Sign up to access "Building Modals in Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
06. Closing the modal from the Livewire component

Episodes

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

Transcript

00:00
So we're now going to look at programmatically closing a modal from within the modal itself within our LiveWire code.
00:06
Now, this is really, really important, because if you're doing something within a modal, like submitting a form or any other action, you want to be able to get rid of that modal once you're done.
00:17
So what we're going to do is, just to demonstrate that these modals just work and act like normal components, we're going to head over to our first modal and just start building
00:25
something out, like a counter. So let's go ahead and add in a counter variable in here and start this at 0. And then we'll go ahead and create our method in here
00:35
to increment this counter, just so we can see that everything is working nicely. So for example, we're just going to increment that counter. And we can just call this increment from our component.
00:46
So let's open up our first modal. Again, I'm just going to create out a separate div in here. We're going to output the value of the counter, which if we head over, we should now see a 0.
00:58
And then just next to this, we'll go ahead and create a button that when we click this, just increments that value. So really easy stuff.
01:07
Let's go over and increment that. And it works nicely. So you can see that this modal works like a modal. The state does still stay.
01:16
So we could figure out later on how to remove the state once this is closed. But for now, let's go ahead and just roll with this. OK, so what we're going to do is have a little bit of fun.
01:25
And inside of increment, when this count gets to 10, I want to close it off. Now, you can use the same snippet of code here to do this when a form submits,
01:34
when you create a record, update a record, or whatever it is. But as an example, let's go ahead and check the counter value. And we will check that and see if it's equal to 10.
01:45
If it is, we want to close the modal off inside of here. So how do we do this? Well, we can go ahead and use this dispatch. So it's all very similar.
01:54
We're just doing this within Livewire code here. And we want to go ahead and dispatch hide, which we haven't looked at yet. Now, we can do this, but we want to be really careful.
02:05
We only want to close the modal that we are currently within. So we're going to chain onto this self. Really important. So rather than saying dispatch to, we dispatch it.
02:18
But we add a kind of modifier to only do this within this component itself. That means that if this was the very top modal and you wanted to close it, the modal underneath that
02:29
would still show. So let's go ahead and take a look at this and hit this and go ahead and increment this up to 10. There we go.
02:37
Our modal has closed. So there we go, a really easy way to programmatically close the modal from within your Livewire code.

Episode summary

In this episode, we dive into how to close a modal programmatically from within your Livewire component. This is super useful whenever you're doing something like submitting a form inside a modal and want it to disappear automatically once you're done!

We start by making a simple counter inside our modal Livewire component. There's a button to increment the counter, and everything updates as you'd expect. Then, just for fun (and demonstration), we make it so that when the counter hits 10, the modal will close itself.

You'll learn how to use Livewire's dispatch method, specifically with the self modifier, to make sure only the current modal is closed (so you don't accidentally close multiple stacked modals). This same technique can be used for closing the modal after any action – like a successful form submission or after updating/creating a record.

By the end, you'll see how easy it is to manage modal state and closing behavior directly inside your Livewire components!

Episode discussion

No comments, yet. Be the first!