Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
19. Calling Livewire from JavaScript

Episodes

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

Transcript

00:00
OK, so how about we add a very simple native JavaScript confirmation to when we delete.
00:05
Now, the reason I want to do this is because this changes around the way that we call LiveWire within our templates. If we take a look at what we're doing at the moment
00:15
over in our book item, when we delete this, we're using wire click. Now, that is specific LiveWire functionality within a blade template.
00:24
But as soon as we start to add a JavaScript confirmation in here, we're going to have to invoke this in a slightly different way. So let's go ahead and just comment this out.
00:33
And we'll copy it over just so we've got some of the styles in there. And let's take a look at how we can create an Alpine component out which handles this for us.
00:42
OK, so I'm going to get rid of the wire click because that's not going to work once we switch this over. And we're going to make this into an Alpine component. So if you've not worked with Alpine.js before,
00:51
we've already touched on this. It's part of LiveWire. It's already installed for us. And we can just create components
00:57
with this mini JavaScript framework. So what I'm going to do, I'm just going to pull these down onto separate lines so we can sort of focus on what is going on.
01:06
So we'll just keep it like that for now. I'm going to add a on handler, kind of similar to the LiveWire on handler. But in this case, we're working with pure Alpine.
01:17
So x on click, we want to do something. So if you're new to Alpine, let's just say click, just so you can see how this is all working. This initializes this particular button as a component.
01:30
And this adds an event handler. And anything within Alpine is prefixed with x. So if you see that anywhere, that's what you're dealing with.
01:37
So let's open up our console and hit Delete. And there we go. Sure enough, we get clicked. So now we can write any JavaScript code in here
01:44
that we want. You might have a modal functionality, a third party package that you're pulling in. In our case, I'm just going to use the native JavaScript
01:51
window confirm here to just say, are you sure? That returns to us a Boolean. So if we click Yes or whatever it says, that's going to go ahead and run this just in here.
02:03
So this is where we want to delete. Let's check this out. And I'm going to hit Delete here. We get, are you sure?
02:09
We can either hit Cancel, which doesn't invoke that, or it doesn't return true. So we don't see that if statement run. But if we press OK, sure enough, we get Delete.
02:18
Now, we've got to figure out how to actually call parent delete book, but from within JavaScript. How do we do this? Well, like we saw a little bit earlier
02:29
when we were in the console, we called LiveWire. Now, we don't necessarily need to do that within here. We can use wire. Again, another magic thing that we
02:38
can use within here to access LiveWire, but from JavaScript. And then we can just do the same thing. So we can just say parent. So we're doing exactly the same thing as we're doing here.
02:48
We're just chaining this on. And then we can say delete book. And because we're still working with an HTML, we can just pass this in here.
02:58
Because we're working within Blade, we can still output this. So let's just take a look at what this looks like within our code, and then we'll
03:04
run it and see what we get. So if we inspect this, you can see, sure enough, we get the window confirm and wire parent delete book 26. Perfect.
03:14
Again, this is still a modifiable value, which is why we introduced our authorization. But this should now work. So let's delete one of these down here,
03:23
because these all look very similar. So let's delete another book. I can cancel that off. Nothing happens.
03:28
But of course, when I hit OK, we access LiveWire, we access the parent, and that gets deleted. So really convenient that we can do this from JavaScript, because you might have a third-party package which
03:40
shows a confirmation modal. And then on any callback within that, you can just go ahead and access LiveWire using this magic wire property.

Episode summary

In this episode, we're taking a closer look at enhancing our delete functionality by adding a native JavaScript confirmation before actually deleting an item. First, we notice that our current Livewire setup uses the wire:click directive in the blade template, but as soon as we want to add a JavaScript confirmation, this approach needs to change.

We start by commenting out the old wire:click method and then convert our delete button into an Alpine component. If you're not super familiar with Alpine.js, it's this lightweight JavaScript framework that works really closely with Livewire and is already set up for us.

The episode walks you through wiring up an x-on:click event in Alpine to display a simple window.confirm() dialog. If the user confirms, that's our cue to actually perform the delete; otherwise, nothing happens.

Next, we explore how to call Livewire actions directly from our Alpine/JavaScript handler. Turns out, Livewire exposes a handy JavaScript API (the @this or $wire property in Alpine, depending on your version) that lets you do exactly what you would with the wire:click, but from JavaScript instead. We use this to call the parent.deleteBook() Livewire method, passing in the book ID.

By the end of the video, we've got a really flexible setup: we can confirm deletions with any custom JS logic or even a third-party modal, and then trigger Livewire methods from our scripts. Super useful for any scenario where you want to mix more complex client-side stuff with your Livewire components.

Episode discussion

No comments, yet. Be the first!