how to show delete confirmation and make request continmue
- hot to make request continue
<script>
document.addEventListener('livewire:init', () => {
Livewire.hook('component.init', ({
component
}) => {
component.intercept('delete', async ({
action
}) => {
action.cancel();
const result = await Swal.fire({
title: 'Are you sure?',
text: "This action is permanent!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'Cancel'
});
// 3. If confirmed, resume the action
if (result.isConfirmed) {
// how to make request continue to delete
}
})
});
});
</script>
public function delete($id)
{
$jobTitle = JobTitle::findOrFail($id)->delete();
}
intercept the click, show the alert, and then trigger the method via $wire if they confirm.
Drop the <script> hook entirely and just do this on your view:
<button
x-data
@click.prevent="
Swal.fire({
title: 'Are you sure?',
text: 'This action is permanent!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$wire.delete({{ $id }})
}
})
"
>
Delete
</button>
alse use wire:confirm:
<button wire:click="delete({{ $id }})" wire:confirm="Are you sure? This action is permanent!">
Delete
</button>
i need it globally no need put it in each action button
need something put it inside app-blade.php
something like this
<script>
document.addEventListener('livewire:init', () => {
Livewire.hook('commit', ({ commit, succeed, fail }) => {
// Only intercept specific actions (delete)
if (!commit.method || commit.method !== 'delete') {
return;
}
commit.prevent(); // stop request immediately
Swal.fire({
title: 'Are you sure?',
text: "This action is permanent!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'Cancel'
}).then((result) => {
if (result.isConfirmed) {
commit.resume(); // 🔥 continue original Livewire request
}
});
});
});
</script>
What you were missing
action.cancel() → prevents execution- But there is no
action.resume() in that hook
- The correct object to control flow is the commit object
So the lifecycle is:
commit.prevent() → stops request
commit.resume() → continues original request
Hi, @respect Have you try this?
if (result.isDenied) {
action.cancel()
}
Please or to participate in this conversation.
