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).
Related
I want to display the message successfully deleting data with Sweetalert, and the beginning of the script:
Delete
Javascript :
jQuery(document).ready(function($) {
$('.delete-link').on('click', function() {
var getLink = $(this).attr('href');
swal({
title: 'Alert',
text: 'Delete?',
html: true,
confirmButtonColor: '#d9534f',
showCancelButton: true,
}, function() {
window.location.href = getLink
});
return false;
});
});
the data has been successfully deleted, but the way you want to display the data message has been deleted like this, where is it put in?
swal("Success!", "Successfully Deleted Data!", "success");
Please help.
Thanks.
Here is the code for the sweet alert.
jQuery(document).ready(function($){
$('.delete-link').on('click',function(){
var getLink = $(this).attr('href');
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
$.ajax({
url: getLink,
type: 'GET',
dataType: 'html'
})
.done(function(data){
console.log(data);
swal("Deleted!", "Your imaginary file has been deleted.", "success");
})
.fail(function(){
swal("Deleted_Error", "Error while deleting. :)", "error");
});
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
});
See here for the example for the Sweetalert
Details: How do I use sweetalert2 with PHP form in CodeIgniter?
Actually, I want to show sweetalert2 on submitting PHP form and then show sweetalert2 to confirm data, if the user confirms data should be submitted and then redirect to next page.
Problem: But in my case, it directly redirects to next page without my pressing confirm button on sweetalert.
PHP:
echo form_open( '/redirect to',['onsubmit'=>'return submitForm(this);']);
JavaScript:
function submitForm(){
swal({
title: "Are you Sure!",
text: "Data is Correct?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#cc3f44",
confirmButtonText: "Yes!",
closeOnConfirm: false
}).then(okay => {
if(okay)
{
alert("check");
}
else
{
alert("not sure");
}
});
}
PHP
echo form_submit(['name'=>'submit','id'=>'submit','value'=>'Submit', 'class'=>'btn btn-primary btn_size' ]);
Please help me regarding this problem. thanks in advance.
I am posting my working code here.I deleted event by sweet alert It was mapped on button by giving a class name 'demo' to button hope it will help
$('.demo').click(function () {
//e.preventDefault();
var id= document.getElementById('id').value;
swal({
title: "Are you sure?",
text: "Your will not be able to recover this Event!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plz!",
closeOnConfirm: false,
closeOnCancel: false },
function (isConfirm) {
if (isConfirm) {
location.href='<?php echo site_url('calendarController/delete_Event/'); ?>'+'/'+id;
} else {
swal("Cancelled", "Your event is safe :)", "error");
}
});
});
Hi I am new in using sweet alert js to make my alert box more fancy. I am using the normal javascript alert confirmation to delete a specific data in my table. However when I try to run a sweet alert confirmation before deleting it deletes the file without the confirmation popping up.
Here is the code in my JS below.
$(".delete-alert").click(function(event) {
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 () {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
});
});
this is my ruby on rails with HTML which calls the above js when clicking on trash icon
<%= link_to raw('<i class="fa fa-trash delete-alert"></i>'), candidate_path(f.id),method: :delete %>
Here is the perfect example how you should use Sweet alert.
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
// Call your delete item function here.
swal("Deleted!", "Your imaginary file has been ted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
I'm trying to make a confirmation pop up before submitting the form. But it's not working. I'm using Sweet Alert 2.
document.querySelector('#order').addEventListener('submit', function(e) {
var form = $(this).parents('form');
e.preventDefault();
swal({
title: "Are you sure?",
text: "Once a invoice is created, you will not be able to delete without the help of support",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
}).then(function() {
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
form.submit();
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
That's my Javascript code and my PHP code looks something like this
<?php
if(isset($_POST['k'])
{
header('Location: https://google.com');
}
?>
My HTML code is
<form method="POST">
<button type="submit" name="k"></button
</form>
It's not working why?
Update
$("#order").on('submit', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Once a invoice is created, you will not be able to delete without the help of support",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
}).then(function() {
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
$(this).trigger('submit');
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
Also I forgot to add that I parsed that code and on my actual code there is the ID on the form
By not working I mean the data isn't being posted. If it was working properly, it should be redirecting to google.com per the PHP code
I am no coder but I found that placing the submit under .then(function() { was a working solution for me. The code I used is lp.jQuery("div.main-form form").submit(); but your form name will be different. I hope it helps in some way.
$("#order").on('submit', function(e) {
var form = $(this);
e.preventDefault();
swal({
title: "Are you sure?",
text: "Once a invoice is created, you will not be able to delete without the help of support",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
}).then(function() {
$(this).trigger('submit');
swal({
title: 'Success!',
text: 'Invoice created! Go to the invoice tab to pay it.',
type: 'success'
}, function() {
$(this).trigger('submit');
});
},function(dismiss) {
if(dismiss == 'cancel') {
swal("Cancelled", "Invoice not created!", "error");
}
});
});
First, you don't have the selector #order in this HTML.
Second, you'll want to prevent the default behavior of the form element, so do this:
$("form").on('submit', function(e) {
var form = $(this);
e.preventDefault();
//[...]
Then, where you want to finally submit, you can put this:
$(this).trigger('submit');
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" />