Using SweetAlert2 to replace "return confirm ()" on ASP.Net button
When I work in ASP.Net, I often like to have "Are you sure?" pop-ups when clicking items such as the delete button. It can be easily done as follows:
<asp:Button runat="server" id="btnDelete" Text="Delete" onClientClick="return confirm('Are you sure?');" onClick="btnDelete_Click" />
I really like the style and overall feel of SweetAlert2's confirmation dialog, however they seem a little more difficult when I try to integrate them in a similar way. Can anyone explain to me how I can return the SweetAlert2 dialog result to continue or stop based on the button clicked?
Here's what I have so far:
<asp:Button runat="server" id="btnDelete" Text="Delete" onClientClick="return sweetAlertConfirm();" onClick="btnDelete_Click" />
function sweetAlertConfirm() {
event.preventDefault();
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
// }).then(function() {
// CONFIRM WAS CHOSEN
// }, {function() {
// CANCEL WAS CHOSEN
});
}
A dialog will pop up and the deletion is of course not handled as I am currently doing event.preventDefault()
and nothing is returned. I also notice that I can use promises by adding .then()
after mine swal({...})
, however I'm not sure how that would be used in this case.
If needed, I can get a complex hidden button that actually triggers the code method and click that hidden button based on the user selection, but I hope to avoid that.
source to share
Since the SweetAlert2 dialog is processed asynchronously, you must invoke another button by clicking programmatically when the promise is resolved. Instead of creating a hidden button, you can reuse it btnDelete
by setting a flag to indicate that the action has already been confirmed. This flag will be detected when processing the second click, and the button click will continue and trigger a server event.
<asp:Button ... OnClientClick="return sweetAlertConfirm(this);" OnClick="btnDelete_Click" />
function sweetAlertConfirm(btnDelete) {
if (btnDelete.dataset.confirmed) {
// The action was already confirmed by the user, proceed with server event
btnDelete.dataset.confirmed = false;
return true;
} else {
// Ask the user to confirm/cancel the action
event.preventDefault();
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
})
.then(function () {
// Set data-confirmed attribute to indicate that the action was confirmed
btnDelete.dataset.confirmed = true;
// Trigger button click programmatically
btnDelete.click();
}).catch(function (reason) {
// The action was canceled by the user
});
}
}
source to share
var obj = { status: false, ele: null };
function DeleteConfirm(btnDelete) {
if (obj.status) {
obj.status = false;
return true;
};
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
obj.status = true;
//do postback on success
obj.ele.click();
Swal.fire({
title: 'Deleted!',
text: 'Your file has been deleted.',
type: 'success',
timer: 800
})
}
});
obj.ele = btnDelete;
return false;
}
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@8/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8/dist/sweetalert2.min.js"></script>
<asp:LinkButton ID="cmdDelete" runat="server" CausesValidation="False" OnClientClick="return DeleteConfirm(this);">
source to share