Develop Reference

having a problem getting the result from a sweetalert2

function confirmation() {
swal.fire({
title: "Are you sure?",
text: "Your about to delete some files",
type: "warning",
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false
}).then((result) => {
if (result.isConfirmed) {
swal.fire("Deleted!", "files are successfully deleted!", "success");
} else {
window.location = "....";
}
});
}
but even if I confirm or deny it just cancels what can I do?
I also tried to use isDenied and still nothing.

For Cancel button in SweetAlert you should use .isDismissed() method of SweeetAlertResult Object. Also you used deprecated properties (closeOnConfirm, CloseOnCancel, type):
function confirmation() {
swal.fire({
title: "Are you sure?",
text: "Your about to delete some files",
icon: 'success',
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
}).then((result) => {
if (result.isConfirmed) {
swal.fire("Deleted!", "files are successfully deleted!", "success");
console.log("Delete files...")
}
if (result.isDismissed) {
swal.fire("Cancelled!", "Files not deleted!", "warning");
console.log("Doing Nothing")
}
});
}
JSFiddle: https://jsfiddle.net/sdurwc9y/
Click Cancel button is equal to click outside modal SweetAlert window. So you can just use else instead of if (result.isDismissed).

Error when use jQuery sweetalert2

This is my code before add sweetalert2 to delete posts:
if (action == "delete") {
this.model.destroy({
beforeSend: function() {
target.addClass('loading');
view.blockUi.block(view.$el);
},
success: function(result, status, jqXHR) {
view.blockUi.unblock();
target.removeClass('loading');
if (status.success) {
if (result.get('post_type') == "post")
window.location.href = status.redirect;
else
view.$el.fadeOut();
} else {
// Error
}
}
});
return false;
}
this is my edit to make sweetalert2 compatible with the action:
if (action == "delete") {
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 () {
swal(
'Deleted!',
'Your post has been deleted.',
'success'
),
this.model.destroy({
beforeSend: function() {
target.addClass('loading');
view.blockUi.block(view.$el);
},
success: function(result, status, jqXHR) {
view.blockUi.unblock();
target.removeClass('loading');
if (status.success) {
if (result.get('post_type') == "post")
window.location.href = status.redirect;
else
view.$el.fadeOut();
} else {
// Error
}
}
})
});
return false;
}
I can't find the mistake the sweetalert2 dialog working right but the action of delete post not working, What can I do?

I can't find the mistake the sweetalert2 dialog working right but the action of delete post not working, What can I do?
When you initially call sweetalert it prompts for a response from the user.
The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise.
If the user confirms, then you can execute the code. You already implemented a way to catch success and error, so when either of those happen, you just need to call sweetalert again to over ride the previous and display the correct alert to the user. You can do the same, optionally, for if the user decides to cancel to give them more feedback.
I believe that this would do the trick:
if (action == "delete") {
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 () {
this.model.destroy({
beforeSend: function() {
target.addClass('loading');
view.blockUi.block(view.$el);
},
success: function(result, status, jqXHR) {
view.blockUi.unblock();
target.removeClass('loading');
if (status.success) {
// Success
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
} else {
// Error
swal(
'Failed',
'Your file has not been deleted',
'error'
)
}
}
})
}, function () {
// Cancelled
swal(
'Cancelled',
'Your file has not been deleted',
'error'
)
});
return false;
}

Passing An ASP.NET Button Click Event in SweetAlert

I have a C# method which performs a suspend operation.
protected void SuspendButton_OnClick(object sender, EventArgs e)
{
var accountNumberId = DepositAccount.DepositAccountNumberId;
var depositAccount = AccountHolders.GetAccountHolder(accountNumberId);
if (depositAccount == null)
{
ShowFailModal("No Account Selected");
}
Common.Deposit.AccountSuspension accntSuspension = new Common.Deposit.AccountSuspension();
accntSuspension.AuditTS = BusinessLayer.Core.DateConversion.GetCurrentServerDate();
accntSuspension.AuditUserId = UserId;
accntSuspension.Description = DescriptionTextBox.Text;
accntSuspension.SuspendedDate = GetDate;
accntSuspension.AccountNumberId = accountNumberId;
if (depositAccount != null)
{
InsertSuspendedAccount(accntSuspension);
}
}
I am using BootBox for the same now
$('#SuspendButton').on('click', function (evt) {
evt.preventDefault();
var message = "Are you sure you want to Suspend this Account?";
bootbox.confirm(message, function (result) {
if (result === false) {
evt.preventDefault();
} else {
// $.showprogress("Account Suspending.Please Wait...");
window.__doPostBack("<%= SuspendButton.UniqueID %>", "");
}
});
});
This is the sample of SweetAlert:
swal({ title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
How can i make it work like BootBox?Like in BootBox, when i press the SuspendButton, it throws a bootbox.confirm popup, and if i press O,K the underlying operation is performed.Can i do that same with SweetAlert?

You can try something like this, let me know if this is not what you want
$('#SuspendButton').on('click', function (evt) {
evt.preventDefault();
//var message = "Are you sure you want to Suspend this Account?";
swal({ title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(isConfirm){
if (isConfirm) {
// $.showprogress("Account Suspending.Please Wait...");
window.__doPostBack("<%= SuspendButton.UniqueID %>", "");
} else {
evt.preventDefault(); }
});
});

try this,
First of all put your sweet alert code in some function lets say 'Suspend()'
eg:
function Suspend()
{
swal({ title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
}
Now on the .aspx/.cshtml side assign the function name in "onClick()"
eg :
<input type="submit" value="Suspend" onclick='return Suspend();' title="Suspend" />

getting return value from function?

function remove(){
console.log(xxx());
if(xxx() != true){
console.log(xxx());
return;
}
console.log('removed');
}
function xxx(){
SweetAlert.swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55"},
function(isConfirm){
if (isConfirm) {
return true;
} else {
return false;
}
}
);
}
How to get return from function xxx().
That's always return undefined when i fire remove().
If return is true i want to do console.log('removed').

As mentioned in the comments, your calling function has no access to the result of the callback function, however you can supply your wrapper xxx function with your own callback to be passed. Therein you have the choice of supplanting the callback entirely or for example pass only the action to be undertaken on success:
function remove(){
xxx(function(){console.log('removed');});
}
function xxx(OnSuccess){
SweetAlert.swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55"},
function(isConfirm){
if (isConfirm && OnSuccess)
OnSuccess();
}
);
}

Page is not waiting for response from SweetAlert confirmation window

I am trying to upgrade my JavaScript confirm() action to use SweetAlert. Currently my code is something like this:
<a href="/delete.php?id=100" onClick="return confirm('Are you sure ?');" >Delete</a>
This waits for the user to confirm before navigating to the delete page. I would like to use this example from SweetAlert to ask the user to confirm before deleting:
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
}
else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
Everything I have tried has failed. When the first alert is displayed, the page has gone ahead and deleted the item and refreshed before the user has even clicked on the alert buttons. How do I make the page wait for the users input?
Any help would be greatly appreciated.

You cannot use this as a drop-in replacement for confirm. confirm blocks the single thread of execution until the dialog has been acknowledged, you cannot produce the same behavior with a JavaScript/DOM-based dialog.
You need to issue a request to /delete.php?id=100 in the success callback for your alert box.
Instead of...
swal("Deleted!", "Your imaginary file has been deleted.", "success");
You need
<a href="#">Delete<a>
...
$.post('/delete.php?id=100').then(function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
You also must fix your delete.php to only accept POST requests. It's a huge problem to allow GET requests to delete resources. The first time Google or any other crawler finds your page, it will look at the href of every link in your document and follow each link, deleting all of your content. They will not be stopped by the confirm box, as they probably (with the exception of Google) won't be evaluating any JavaScript.

You can do it this way.
HTML:
<a href="/delete.php?id=100" class="confirmation" >Delete</a>
JS:
$('.confirmation').click(function (e) {
var href = $(this).attr('href');
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: true,
closeOnCancel: true
},
function (isConfirm) {
if (isConfirm) {
window.location.href = href;
}
});
return false;
});
Seems a hack but it's working for me.

$('.delete').click(function () {
var id = this.id;
swal({
title: "Are you sure?",
text: "Your will not be able to recover this post!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
alert(id);
});
});
<a id="<?php echo $row->id_portfolio ?>" class=" delete">

Here's an example in an Angular directive (since SweetAlert is offered through an angular directive wrapper). This is one 'elegant' method for doing this in JavaScript. On a click event, there is an e.stopImmediatePropagation(), then if the user confirms, it evaluates the "ng-click" function. (Note scope.$eval is not a JavaScript eval()).
Markup:
<i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>
Simple "confirm click" directive:
/**
* Confirm click, e.g. <a ng-click="someAction()" confirm-click="Are you sure you want to do some action?">
*/
angular.module('myApp.directives').directive('confirmClick', [
'SweetAlert',
function (SweetAlert) {
return {
priority: -1,
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var message = attrs.confirmClick || 'Are you sure you want to continue?';
SweetAlert.swal({
title: message,
type: 'warning',
showCancelButton: true,
closeOnConfirm: true,
closeOnCancel: true
}, function (isConfirm) {
if (isConfirm) {
if(attrs.ngClick) {
scope.$eval(attrs.ngClick);
}
} else {
// Cancelled
}
});
});
}
}
}
]);