Instead of make a round trip go to the server, call a method that should some alert, with this approach you will get an instant response, also better user experience
Place the SweetAlert2 library in your app.blade.php or main template
then
Include this in your app.js or in whatever your global js file name is
window.confirmMessage=function (title=’’,message,type=‘info’,event={},size=‘33rem’){
Swal.fire({
showConfirmButton: true,
showCancelButton: true,
confirmButtonText: Continue
, // also labels you can set it as parameters
cancelButtonText: ‘Cancel’,
title: <span class="text-md font-semibold">${title}</span>
,
html: <span class="text-md font-semibold">${message}</span>
,
icon: type,
width: size,
customClass: {
title: ‘text-md’ // I’m using tailwind here
},
padding: ‘1rem’
}).then((result) => {
if (result.isConfirmed) {
livewire.emit(event.name,event.data); //the livewire event that we wanna call after user confirm the action
}
});
Then in your livewire component or global in your app.js, but to be more specific i use it in my component directly create a function like this
function ConfirmSave(userdata)
{
let title=¿Do you want to continue?
;
let message=‘This action cannot be revert’;
let event={
name:‘checkin’, //Livewire event Name
data:userdata, // Data to event
};
confirmMessage(title,message,‘warning’,event,‘40rem’);
}
In your action button a little of alpine here (Replace [] with the right HTML button tag)
[button x-data x-on:click=“ConfirmSave(’{{$user->slug}}’)”>Save</button]
You are done, have a fast and good looking confirm message with Sweetalert2