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.
Related
I am trying to conditional rendering when state is undefined, and i would like to show a sweetalert to show the user that he has not selected a client. But i am receiving this error:
Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
Snippet:
const location = useLocation();
const ClientNotSelected = () => {
return (
<div>
{
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) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
}
</div>
)
}
if (location.state === undefined) {
return <ClientNotSelected />;
}
There is no need to create and render a component to fire the alert.
You can move Swal.fire() to your if statement.
Like this:
if (location.state === undefined) {
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) {
Swal.fire("Deleted!", "Your file has been deleted.", "success");
}
});
}
HOW I SOLVED IT:
I have created
const [clientSelected, setClientSelected] = useState(false);
and i checked it in the useEffect, with swal.fire inside here it doesnt give any problems/errors
useEffect(()=>{
if (location.state === undefined){
setClientSelected(false);
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Ok'
}).then((result) => {
if (result.isConfirmed) {
history.goBack();
}
})
}
else{
setClientSelected(true);
}
})
below i have continued with the same condition but checking the new var clientSelected
if (!clientSelected) {
return <h1>Select a client</h1>;
} else {
return <Component />;
}
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
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!'
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!