Develop Reference

How to stop a function from being called when the page opens

So I have this Sweetalert2 function and it works great. Except it runs as soon as the page loads which is not what I want.
What I want is when I click on an element. I want it to be executed!
Also, I noticed that if the alert runs for the first time. It doesn't run when I click it because it ran on the first time
HTML
<i class="fas fa-search navigation__search-cart--icon"></i>
JS (SweetAlert file. From here I'm exporting the function that always gets called.)
export default sweetAlert = Swal.fire({
title: "Search...",
input: "text",
inputAttributes: {
autocapitalize: "off"
},
showCancelButton: true,
confirmButtonText: "Search",
showLoaderOnConfirm: true,
preConfirm: async val => {
try {
const response = await fetch(`//api.github.com/users/${val}`);
if (!response.ok) {
throw new Error(response.statusText);
}
return response.json();
} catch (err) {
Swal.showValidationMessage(`Request failed: ${err}`);
}
},
allowOutsideClick: () => !Swal.isLoading()
}).then(result => {
if (result.value) {
Swal.fire({
title: `${result.value.login}'s avatar`,
imageUrl: result.value.avatar_url
});
}
});
JS (Where the actual click happens)
import sweetAlert from "./sweetAlert";
const search = document.querySelector(
".fas.fa-search.navigation__search-cart--icon"
);
search.addEventListener("click", sweetAlert);
What should I do to stop the function from running on page load? And how can I make it run whenever I click on the element?

SweetAlert2 - Start with showLoading () and close after executing a function

I need to open SweetAlert with a loading, execute a JS function "myFunc()" and close SweetAlert.
I invoke SweetAlert with a loading:
Swal.fire ({
   title: 'Wait ...',
   onBeforeOpen: () => {
     Swal.showLoading ()
   }
})
Where should I put myFunc () in the code?

My thought would be that there isn't really any reason to include your function in the SweetAlertOptions object. Since you're only using SweetAlert2 to show a loading dialog while your function executes, and not getting any user input from it, you can just treat it in a procedural manner:
Swal.fire({
title: 'Wait ...',
onBeforeOpen () {
Swal.showLoading ()
},
onAfterClose () {
Swal.hideLoading()
},
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false
})
myFunc()
Swal.close()
If you're using async/await don't await the initial Swal.fire(). You don't care about the result anyway.
If myFunc() is asynchronous (which it should be in order to not lock the UI thread during loading), await it and then close, or close in the resolution of the promise
await myFunc()
Swal.close()
OR
myFunc().then(result => {
Swal.close()
})
Alternatively, you could call myFunc and Swal.close() in the OnOpen function:
Swal.fire({
...
onOpen () {
myFunc()
Swal.close()
}
...
})
Swal.fire({
...
async onOpen () {
await myFunc()
Swal.close()
},
...
})
Swal.fire({
...
onOpen () {
myFunc().then(result => {
Swal.close()
})
}
...
})

if you use the modal of steps, you can use willOpen option with arrow function
await Queue.fire({
title: titulo,
html : html,
willOpen:()=>{
operations///
}
})
},
currentProgressStep: 0,
// optional class to show fade-in backdrop animation which was disabled in Queue mixin
showClass: { backdrop: 'swal2-noanimation' },
})

how to show custom confirmation alert in loop for react JS?

Problem:
I am uploading files using "react-dropzone" and showing confirmation alert using "react-confirm-alert" if image name is already exist.
i have to verify image name duplication and show confirmation in loop but it only run one time.
Need:
I have to show confirmation alert in loop.
Issues:
In this example i am using async/await to show confirmation in loop.
its showing in loop but data from replaceImageAlert() is undefined.
please suggest better place or better solution
this example is working fine with window.confirm() but i have to use custom confirmation box.
...
async replaceImageAlert(index, fileObject){
await new Promise(function (resolve, reject) {
confirmAlert({
title: 'Confirm to update old image',
message: 'Are you sure to do this.',
buttons: [
{
label: 'Yes',
onClick: () => {
resolve(true);
}
},
{
label: 'No',
onClick: () => {
resolve(false);
}
}
]
});
});
}
...
async function abc(){
for (var i =0; i < accepted.length; i++){
var chechAndRemoveDuplicate = HF.removeDuplicateImage(accepted[i], this.props.files);
if (chechAndRemoveDuplicate.duplicate){
var temp = accepted[i];
var cb = await this.replaceImageAlert(i, temp);
console.log('cb', cb);
}else {
generateFile(i, accepted[i]).then((value)=>{
this.props.setResourceFile(value.fileObject); //add file data to file aray
});
}
}
}

Your replaceImageAlert method just waits for the promise, but it doesn't do anything with the result value, and it doesn't return anything. You will want to use
replaceImageAlert(index, fileObject){
return new Promise(function (resolve, reject) {
//^^^^^^
confirmAlert({
title: 'Confirm to update old image',
message: 'Are you sure to do this.',
buttons: [
{
label: 'Yes',
onClick: () => resolve(true)
},
{
label: 'No',
onClick: () => resolve(false)
}
]
});
});
}
So that when you do const x = await replaceImageAlert(…), the x will actually be false or true.

The await keyword is meant to be used inside an async function. To solve your issue you need to declare your functions as:
function replaceImageAlert() {
return new Promise(/* ... */);
}
async function abc() {
// some code
await replaceImageAlert();
}

Prevent going back when hardware back button is pressed in Ionic 4 App

this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
//Page should not go back.
//This is where i want to write code,if the user clicks
No and the back button function should be disabled.
//Only when the user presses Yes,the page will go to
previous.
}
}
]
});
})
I dont know how to handle when the user presses no,i.e.Disable the back button function or event.

Finally i solved the issue.As the event emitted from the backButton is an promise.If I dont need to go back,i just reject that promise.
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
reject()
}
}
]
});
})

Try this way to prevent the back button
this.platform.backButton.subscribeWithPriority(9999, () => {
this.dismiss();
});

Dismiss AlertController and stop function call

I have a function that displays an alert controller and a button that when clicked updates a field on a firestore database. After 15 seconds the alert is dismissed and another function is fired.
pickupIsRequested(){
this.pickupRequest.pickupStatus.subscribe(value => {
console.log(value);
if(value == true){
let alert = this.alertCtrl.create({
title: 'You have a Pickup Request!',
message: '<span>Princess who is 3 minutes away requests a ride</span><hr/> You have 15 seconds to accept the request!',
buttons: [
{
text: 'Accept Ride',
handler: () => {
this.driver.updateDriverInRide(true, this.driverId);
}
}
]
});
alert.present();
setTimeout(() => {
alert.dismiss();
this.driver.updateDriverPickupRequest(false, this.driverId);
}, 15000);
}
});
}
How can I stop the function call on the setTimeout method after I click on the alert controller button? Right now if I click on the button the this.driver.updateDriverPickupRequest still fires.

You can use clearTimeout() to cancel your function
pickupIsRequested(){
// First you need to create your timeout
let myTimeout = setTimeout(() => {
alert.dismiss();
this.driver.updateDriverPickupRequest(false, this.driverId);
}, 15000);
this.pickupRequest.pickupStatus.subscribe(value => {
console.log(value);
if(value == true)
{
let alert = this.alertCtrl.create({
title: 'You have a Pickup Request!',
message: '<span>Princess who is 3 minutes away requests a ride</span><hr/> You have 15 seconds to accept the request!',
buttons: [
{
text: 'Accept Ride',
handler: () => {
this.driver.updateDriverInRide(true, this.driverId);
// Cancel it here
clearTimeout(myTimeout);
}
}
]
});
alert.present();
}
});
}