We Keep Coding

Oracle Apex stop a dynamic Action with SweetAlert js Code

I created a DA using a SweetAlert js code but when i click in the cancel button the other actions in this DA dont stop.
This is the code that im using:
``
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
swalWithBootstrapButtons.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
} else if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
``
What do i need to do to stop the actions when i push the cancel button?
Thanks in advance for all your help.

Try with apex.da.cancel.
Find out more on this link.

Objects are not valid as a React child (found: [object Promise]) trying to return swal

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 />;
}

Chain To Then Function While Encapsulating One in ES6

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.

SweetAlert not working with single quotes

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!'

SweetAlert2 form validation does not return

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();
}
});