Laravel livewire : wire:click avec Javascript onclick confirm

Mis à jour il y a 2 ans

Un tutoriel pour gérer le comportement de l'action wire:click sur un élément HTML avec l'attribut onclick et l'évènement Javascript confirm()

Dans un composant Laravel Livewire, lorsque nous voulons effectuer une action quand on clic sur un bouton, nous pouvons utiliser l’attribut wire:click en indiquant la méthode à exécuter de la manière suivante :

<button wire:click="delete()" >Supprimer</button>

Pour une action telle que delete() qui va supprimer une donnée, nous pouvons demander une confirmation à l’utilisateur avant d'exécuter l'action en présentant une boîte de dialogue avec l'attribut onclick et la méthode Javascript confirm() :

<button wire:click="delete()" onclick="confirm('Vous confirmez la suppression ?')" >Supprimer</button>

La boite de dialogue suivante est affichée lorsqu'on clic sur le bouton :

Boite de dialogue Javascript confirm()

Mais en cliquant sur l'option Annuler de la boite de dialogue, la méthode delete() du composant Livewire s’exécute tout de même.

Pour corriger ce comportement, nous pouvons appeler la méthode Javascript Event.stopImmediatePropagation() (Voir documentation) pour empêcher l'appel des autres évèments attachés au bouton quand l'utilisateur ne confirme pas l'action :

<button wire:click="delete()" onclick="confirm('Vous confirmez la suppression ?') || event.stopImmediatePropagation()" >Supprimer</button>

Notez l'utilisation de l'opérateur || ou « ou » entre les méthode JavaScript confirm() et event.stopImmediatePropagation().

Portez-vous bien ! 😎

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil

Commentaires