One-Line Confirmation Dialog in Laravel Livewire: Wire:Confirm

▶

Here I want to introduce you to a little wonder that I'm always reading in the course documentation, which I'm sort of doing on the fly, so as to always have the latest, and it turns out to be precisely this:

wire:confirm

I think this tells us enough, and we could even leave it there because it's obviously pretty obvious, but we're going to do a little demonstration anyway. We're simply going to modify the button that, by default, calls a method called delete, so that now, by defining the previous parameter, a confirmation dialog box appears, and when pressed, the script defined in wire:click is executed:

<flux:button class="ml-3" variant='danger' size="xs" wire:click="delete({{ $c }})" wire:confirm="Are you sure you want to delete this category?">
     {{ __('Delete') }}
</flux:button>

With confirm() on JavaScript

A confirmation dialog is nothing more than a dialog box that is displayed in the browser to confirm an action to be performed in a web application. For example, if a user clicks a button that deletes a record in a table, a confirmation dialog can be displayed asking the user if he is sure that he wants to delete the record. Let's see how to implement one in Livewire.

Laravel Livewire is great, performing operations that require both sides, that is, the client and the server are always heavy since we have to create rest apis, and connect both entities, or from vanilla JavaScript, send fetch requests, return json, evaluate answer, make changes to the html... a real mess and a lot of work to make updates; Livewire abstracts us from all this using events and functions, as well as a base structure to be able to communicate between the client and the server in a very direct way.

The problem is that this facility sometimes makes us inflexible, and performing simple operations such as deleting, are too simple and direct with livewire; usually we have in Livewire something like:

<flux:button wire:click="delete({{ $p }})" href="#">
      Delete

In practice, if we click on the HTML element that has said attribute defined, it DELETES THE ELEMENT FROM ONE, which you probably won't want because our user may mistakenly click on that option; for deletions it is good practice to place a confirmation dialog; so, to avoid deleting records with a single click, on the same element that contains the wire:click, you can place a JavaScript onclick with said confirmation dialog:

<flux:button onclick="confirm('¿Seguro que quieres eliminar?') || event.stopImmediatePropagation()"  wire:click="delete({{ $p }})" href="#">
      Delete
</flux:button>

The key here is the stopImmediatePropagation which stops the scheduling of the event; livewire at its core uses events on the client to call events on the server, JavaScript events that we can also stop.