I am trying to delay a SweetAlert popup to not display for a few seconds once it has been triggered.
e.g. User performs action on webpage to trigger SweetAlert, but instead of displaying instantly, it wait 2 seconds and then displays. - I've been researching various ways to do this, but no luck...I think maybe setTimeout is needed?
Here is my SweetAlert function which is working so far:
if( response == 10 ){
swal({
type: 'success',
title: 'YOUR BALANCED BOX IS FULL',
text: 'Youve added the recommended amount of items for your plan!',
allowOutsideClick: false,
showCancelButton: true,
cancelButtonText: "Modify Selection",
cancelButtonColor: '#d33',
showConfirmButton: true,
confirmButtonColor: '#61ce70',
confirmButtonText: "Proceed To Cart",
}).then((result) => {
if (result.value) {
window.location = "/basket/";
}
})
}
Any help appreciated!
SPECIFIC SWEETALERT 2 ANSWER:
Above code logic answer from Leo is correct. Am sharing the final version with SweetAlert 2 with setTimeout as a function added to delay the popup from opening.
The setTimeout function wraps around the entire SweetAlert 2 function and the timer is set at the bottom of the end of the function (in this case to 3000).
Hope this helps anyone looking to do the same!
setTimeout(function(){swal({
type: 'success',
title: 'YOUR BALANCED BOX IS FULL',
text: 'Youve added the recommended amount of items for your plan!',
allowOutsideClick: false,
showCancelButton: true,
cancelButtonText: "Modify Selection",
cancelButtonColor: '#d33',
showConfirmButton: true,
confirmButtonColor: '#61ce70',
confirmButtonText: "Proceed To Cart",
}).then((result) => {
if (result.value) {
window.location = "/basket/";
}
})},3000);
Yes indeed you can use setTimeout to achieve this easily, i set up a simple snippet so you can try it out!
// When button gets clicked.
$("#button").click(() => {
// Instantely change it's text to loading..
$("#button").text("Loading!");
// Wait 2kms then change the text to Done!
setTimeout(() => {
$("#button").text("Done!");
}, 2000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Event</button>
-Leo
Related
This question already has answers here:
How to have sweetalert return true/false for confirm without promise?
(4 answers)
Closed last month.
Here is my code where i am using sweetalert latest code for showing up a confirmation just like a javascript confirm box to act if ok, is pressed adn if its a cancel, do nothing,
Here is my try and my original code
var rtrnval = swal({
title: "Check!",
text: "You must select a task before entering hours.",
type: "warning",
showCancelButton: true,
confirmButtonColor: "##DD6B55",
confirmButtonText: "Confirm",
closeOnConfirm: false
}, function(isConfirm){
return isConfirm; //Will be either true or false
});
alert(rtrnval); return;
my original code is like this
var rtrnval = confirm("You must select a task before entering hours.");
it is not showing the sweetalert box when i change confirm to swal, it throws error on the function but when i use confirm, the function works properly,
i am unable to read the value being returned to me like true/false so i ca act upon it
any guidance, greatly appreciated
i already posted code what i tried
here is what i want to replace
function ConfirmDelete(id){
var rtrnval = confirm("are you sure!!");
if (rtrnval == 1)
{
location='page2.php='+id
}
return 0
}
and some cases i am doing this
return confirm("are you sure")
Try this:
Swal.fire({
title: "Check!",
text: "You must select a task before entering hours.",
type: "warning",
showCancelButton: true,
confirmButtonColor: "##DD6B55",
confirmButtonText: "Confirm",
closeOnConfirm: false
}).then((result) => {
if (result.isConfirmed) {
console.log('Confirmed');
} else if (result.isDenied) {
console.log('Canceled');
}
})
I am using this jquery repeater.
I am using custom calculations on each addition of form, say multiplying one input with another, and then making a total of multiplication results.
Problem is when we click on delete, it just hides the row but don't delete values of the item,
When we delete one more item, then it will delete the first item which was hidden and my calculation is get updated.
I check the number of class on delete of item, it does not reduce on first delete, it always reduces on the second delete,
How to completely delete the row with its values?
var _CalTotal = function () {
console.log($(".billitem_quantity").length );
//Calculate total of quantity
var total_quantity = 0;
$(".billitem_quantity").each(function(){
total_quantity += parseFloat($(this).val());
});
$('#itemquantity_total').val(total_quantity.toFixed(2));
**//Calculate total of amount**
var total_amount = 0;
$(".billitem_total").each(function(){
total_amount += parseFloat($(this).val());
});
$('#bill_total').val(total_amount.toFixed(2));
console.log('test');
}
Below is code for hide,
hide: function(deleteElement) {
Swal.fire({
title: "Are you sure to cancel this order?",
text: "You will not able to revert this",
icon: "question",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, revert it!",
reverseButtons: true,
}).then(function(result) {
if (result.value) {
$(this).slideUp(deleteElement);
//I guess something is missing here to delete that item with first delete fire.
_CalTotal(); //Here i am calling calltotal function.
} else if (result.dismiss === "cancel") {
}
});
},
After some debugging I found that setting a setTimeout() of 1 second removed your issue. This means some code is asynchronously processed in the background. Therefore you need a callback function or a promise.
You can do it like this by adding to the slideUp() callback function:
hide: function(deleteElement) {
Swal.fire({
title: "Are you sure to cancel this order?",
text: "You will not able to revert this",
icon: "question",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, revert it!",
reverseButtons: true,
}).then(function(result) {
if (result.value) {
$(this).slideUp(function(){
deleteElement();
_CalTotal();
);
} else if (result.dismiss === "cancel") {
}
});
},
I got the solution from this question (not the accepted answer).
In the Swal Github is advised to ask questions to SweetAlert2 in SO, therefore my posting here...
Behind a save button in my (asp.net core) app, I check some things and - in some cases - have to ask the user (yes/no) and - depending on his selection - have to overwrite some data before store.
If I use an (jQuery) alert or a confirm, the code stops, until the user has clicked a button.
In Swal, I don’t have found any way (including “.then(“) to stop the code, until the user has clicked a button.
The message is shown, but the code runs further....
Is it really not possible to stop the code with Swal...?
=> If there is a way, how to do...?
Thanks
It supports callback right? Here is some code which I found in the examples.
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
allowOutsideClick: false,
allowEscapeKey: false,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
You can continue the execution based on the result.value
It seems, as there is really now way to stop the JS code until the user has done his chosen
So.. I had to change my logic.
Logic before:
To check something ( 1 ) , show an swal (e.g. set focus to a control) and then return in code works (of cause of the return).
This way,the message is showed (until the user close it) and the data are not stored.
To ask the user something in a swal (Do you really want to..." and then do some things based in the answer of the user before the date are stored, don't work, as the JS Code ist not stopped until the user has made a choice.
Der swal is showed, but the data data are saved ( 3 ) immediately (no wait here).
To reach what I need, I had to change the logic.
New Logic
I had to decouple the check logic from the save:
No change to the check ( 1 )
Move the save of the data ( 3 ) in a separated function (SaveData())
Give out the swal ( 2 ) and then call SaveData() ( 3 ) from the swal functions.
My code to the swal:
if ((AvatarHochgeladen) && (!(AvatarUebernommen))) {
swal.fire({
title: '! Achtung !',
html: 'Sie haben eine eigene Grafik hochgeladen, diese aber nicht mit dem Button "Ihren upload übernehmen" als aktuellen Avatar übernommen. <br> Wenn Sie die Daten so speichern, geht Ihr hochgeladener Avatar verloren. <br> Wollen Sie Ihre hochgeladene Grafik als Avatar speichern?',
icon: 'question',
showCancelButton: true,
confirmButtonColor: 'blue',
cancelButtonText: 'Nein',
confirmButtonText: 'Ja',
}).then((result) => {
if (result.value) {
AvatarSpeichern = AvatarBase64;
SaveUserdata();
}
else { SaveUserdata(); }
})
}
So.. if the user chose "Yes", I replace a variable and call SaveData(), if the user chose "No" I directly call SaveData().
My conclusion:
As swal is "non blocking" (don't stop a running JS script), we have to split the logic and call (from the user choice depending) code from swal internal.
I Try:
function delete_rec_sub_button(id) {
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.isConfirmed) {
delete_rec_sub_button.yesKill();
}
});
delete_rec_sub_button.yesKill = function() {
//real code delete(id)
if('return sucess of delete'){
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}else{
Swal.fire(
'error!',
'Unable to delete, current record is in use',
'error'
)
}
};
}
Trying to use SweetAlert2 with a form sending confirmation. But no matter what I try, I can't get it to work.
Swal.fire({
title: err_msg,
//html: strCEmail,
text: 'hello',
type: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, send it!'
}).then((result) => {
if (result.value) {
// xxxxxxxxxxxxxxxxxxxx
}
});
The code reachs the xxxxxxxxxxxxx fine, but whatever I put there doesn't trigger the form to submit.
I've tried the obvious
return true;
But that didn't work. Then after some digging I found a suggestion to submit the form like this:
document.forms["myform"].submit();
or
form.submit();
Which didn't work.
So... what can I use to submit the form once the user has selected submit in SweetAlert2?
Most likely you're trying to access something that doesn't exist.
Based on SWAL documentation and this post: Response from Sweet-alert confirm dialog
you should just try to do "if(result)" instead of "if(result.value)".
Also, as I commented above, you should go through the documentation and read the pokémon example, it may give you a hint: sweetalert.js.org/guides/#advanced-examples
Give id to your form
<form action="your-action" method="post" id="my_form">
In js:
Swal.fire({
title: err_msg,
text: 'hello',
type: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, send it!'
}).then((result) => {
if (result.value) {
$(document).find('#my_form').submit();
}
});
Having some issues with the plugin Bootstrap File Input and SweetAlert2
This is for showing a dialog box to confirm if the user really wants to proceed with deleting the file.
I need to return a boolean for filepredelete event if I'm going to abort the deletion of the file. The function is synchronous but I'm using an asynchronous plugin SweetAlert2 with promises.
Here's my code:
$("#gallery-images").fileinput({
...
}).on("filepredelete", function(event, key, jqXHR, data) {
swal({
title: 'Are you sure you want to delete this image?',
showCancelButton: true,
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
type: 'warning',
}).then((result) => {
if(result.value){
return false;
}
return true;
});
});
I can't find a way to wait for the confirmation. I'm thinking of just always abort the deletion and just manually delete the file when the user confirmed. I need to refactor my code.
Try the promises, I've been struggling the same problem for 3 days and figured out, hope this help for some one.
$("#gallery-images").fileinput({
...
}).on("filepredelete", function(event, key, jqXHR, data) {
return new Promise(function(resolve, reject) {
swal.fire({
title: 'Are you sure?',
text: 'You will not be able to recover this file!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, keep it'
}).then((result) => {
if (result.value) {
resolve();
}
});
});
});
Enjoy!