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();
}
});
Related
Currently I have a delete button on my datatable and I'm using data-id & class btnDelete just to get it the id foreach row.
<button data-id="1" class="btnDelete">Delete</button>
Now I have this jQuery & SweetAlert code
$(".btnDelete").click(function() {
var id = $(this).attr('data-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.value) {
alert(id);
}
});
});
But this gives me an error like this
Uncaught (in promise) ReferenceError: id is not defined
BTW: I can alert the var id outside of the sweetalert but can't alert it inside the code of sweetalert
I'm a new ecmaScript6-student.
I need to chain to "then" promises while encapsulating a library function.
Swal is sweetAlert2 function to ask questions and get response from user, yes/no.
Here is what I'm trying to do;
class MyLib {
constructor() {
}
static askQuestion(title, message){
Swal.fire({
title: title,
text: message,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
return result;
})
}
}
Then call this function like;
MyLib.askQuestion("Are you sure?", "Are you sure you want to delete this ?").then(alert(result));
But ofcourse; on runtime console gives me ".askQuestion(...) is undefined" because of the alert(result).
How do I chain two then function in es6 ?
You need to return your promise:
class MyLib {
constructor() {
}
static askQuestion(title, message){
return Swal.fire({
title: title,
text: message,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
});
}
}
And, as others have said, your .then(result => {return result;}) was pointless so it can be removed.
Then, when you use it, you have to pass a functon reference to .then() so change this:
MyLib.askQuestion("Are you sure?", "Are you sure ...").then(alert(result));
to this:
MyLib.askQuestion("Are you sure?", "Are you sure ...").then((result) => alert(result));
or this:
MyLib.askQuestion("Are you sure?", "Are you sure ...").then(alert);
And, if Swal.fire() can ever reject it's promise, you need a .catch() too.
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'
)
}
};
}
When using SweetAlert i'm having problems when using single quotes for example the code below works
<script>
function test()
{
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) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
}
</script>
But when using this with single quotes (within php echo) - it will not work
text: "You won't be able to revert this!", = ok
text: 'You won't be able to revert this!', = not ok.
is there a answer to this puzzle.
You have an unescaped quote in the word won't. If you wish to use single quotes to define your string, you should escape it, like so: 'You won\'t be able to revert this!'
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