To handle a delete confirmation with SweetAlert2 in Laravel 11, you typically display a confirmation dialog, and then, based on the `result.value`, proceed with the delete operation if the user confirms.
Here’s how you can set it up:
1. Include SweetAlert2 in your Blade template.
2. Trigger SweetAlert2 on a delete button click.
3. Handle the result.value to proceed with the delete action only if confirmed.
Example Code
Assuming you have a button to delete an item and you’re using AJAX to perform the delete request, here’s how you could set it up:
Step 1: Add SweetAlert2 in Your Blade Template
Add SweetAlert2 using a CDN (or use `npm` to install it if managing dependencies in `package.json`).
html
<!– Include SweetAlert2 from a CDN in your Blade template –>
<script src=”https://cdn.jsdelivr.net/npm/sweetalert2@11″></script>
Step 2: JavaScript for Delete Confirmation
Here’s an example of how to use SweetAlert2 to confirm the delete action and handle `result.value` to proceed with the delete only if confirmed:
javascript
<script>
document.addEventListener(‘DOMContentLoaded’, function () {
// Select all delete buttons
document.querySelectorAll(‘.delete-button’).forEach(button => {
button.addEventListener(‘click’, function (e) {
e.preventDefault();const deleteUrl = this.getAttribute(‘data-url’); // URL for deletion
Swal.fire({
title: ‘Are you sure?’,
text: “You won’t be able to revert this!”,
icon: ‘warning’,
showCancelButton: true,
confirmButtonColor: ‘#3085d6’,
cancelButtonColor: ‘#d33’,
confirmButtonText: ‘Yes, delete it!’
}).then((result) => {
if (result.value) {
// User confirmed deletion
fetch(deleteUrl, {
method: ‘DELETE’,
headers: {
‘X-CSRF-TOKEN’: document.querySelector(‘meta[name=”csrf-token”]’).getAttribute(‘content’)
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
Swal.fire(
‘Deleted!’,
‘Your file has been deleted.’,
‘success’
);
// Optionally, remove the deleted item from the DOM
} else {
Swal.fire(
‘Error!’,
‘There was a problem deleting your file.’,
‘error’
);
}
})
.catch(error => {
console.error(‘Error:’, error);
Swal.fire(
‘Error!’,
‘An error occurred while deleting.’,
‘error’
);
});
}
});
});
});
});
</script>
Step 3: Add Delete Button in Your Blade File
In your Blade file, set up a delete button with the `data-url` attribute:
html
@foreach ($items as $item)
<button class=”delete-button” data-url=”{{ route(‘items.destroy’, $item->id) }}”>
Delete
</button>
@endforeach
Make sure you have the `X-CSRF-TOKEN` meta tag in your HTML `<head>`:
html
<meta name=”csrf-token” content=”{{ csrf_token() }}”>
Explanation
– .delete-button: The class for delete buttons, each having a `data-url` attribute to specify the delete URL.
– SweetAlert2: The `Swal.fire` prompt confirms the action.
– Fetch API: Sends the DELETE request to the specified URL if the user confirms (`result.value` is true).
– CSRF Token: Passes the CSRF token in the headers for Laravel’s security.
This setup will confirm the delete action with SweetAlert2, and only send the delete request to the server if the user clicks “Yes, delete it!”
Hope this answer from hire tech firms helps you solve the problem you are into!