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();
}
Related
I am trying to create a sweetAlert2 function where I want to fire a loading screen. And during the loading screen, I want to execute some functions, which can take some time. Afterward I want to display a fire success or error, depending on what the return will be. I tried several methods:
Swal.fire({
title: 'Auto close alert!',
html: 'In progress',
timerProgressBar: true,
didOpen: () => {
try {
Swal.showLoading();
call other functions..
if success show
Swal.fire({
icon: 'success',
title: 'Success...',
html: message
});
or else fire error
catch(err){
etc.
}
}
)};
Now when I execute the function it waits a few seconds (executing functions) and then it shows the success or error fire, but it doesn't show the in-progress loading dialog first. Any idea how to get this?
Fixed it by using setTimouts and promises:
//Start
Swal.fire({
title: 'In progress',
html: 'Please wait while your action is being carried out.',
timerProgressBar: true,
didOpen: () => {
//here it will open the in progress box
Swal.showLoading();
//setTimeout with 1000 or more ms is needed in order to show the inprogress box
setTimeout(async () => {
let currentRecID = currentRecord.get().id;
//load complete record
currentRec = record.load({
type: record.Type.OPPORTUNITY,
id: currentRecID,
isDynamic: true
});
const promiseVar = () =>
new Promise((resolve, reject) => {
resolve(canCreateORD(currentRec));
});
canORDbeCreated = await promiseVar();
//Automatically close popup so it continues with willClose
Swal.close();
}, 1000);
},
willClose: () => {
//Show success / error box with Swal.fire
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' },
})
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();
});
I have a SweetAlert2 that allows text input, and I give it a default value. I'd like this default value to be highlighted when the alert pops up, so that the user can immediately overwrite it if needed. Here's an example:
And here is the function that I call with the sweetAlert options:
window.sweetPrompt = function (title, message, callback, input, keepopen, allowOutsideClick, allowEscapeKey) {
sweetAlert({
title: title,
text: message,
input: 'text',
confirmButtonColor: "#428bca",
preConfirm: function(text) {
return new Promise(function(resolve) {
if (!keepopen) {
resolve();
} else {
callback(text);
}
});
},
inputValidator: function(text) {
return new Promise(function (resolve, reject) {
if (text) {
resolve();
} else {
reject('Cannot be empty!');
}
});
},
inputValue: input,
showCancelButton: true,
reverseButtons: true,
allowOutsideClick: allowOutsideClick,
allowEscapeKey: allowEscapeKey
}).then(callback, function(dismiss){});
};
How would I go about doing this (if it's possible) ? I thought about using jQuery but I'm not sure how to get the reference to the sweetAlert dialogue.
Any suggestions would be appreciated.
Here you go:
Swal.fire({
input: 'text',
inputValue: 'input value',
didOpen: () => {
Swal.getInput().select()
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
PS. Please note that SweetAlert2 and SweetAlert are two different projects with slight differences in API.
SweetAlert2 documentation: https://sweetalert2.github.io/
I want to show a popUp in ionic, which does not allow the user to exit when he hasn't entered some input. Right now I'm using this here:
public showOwnIdentifierPrompt() {
// Prompt popup code
var promptPopup = this.$ionicPopup.prompt({
title: this.floor_name,
template: `<input ng-model="$ctrl.customFloorName"></input>`,
scope: this.$scope,
buttons: [
{
text: this.cancel,
type: 'button-clear button-balanced',
onTap: function(e) {
// Cancel creation
return false;
}
},
{
text: this.save,
type: 'button-clear button-balanced',
onTap: () => {
// Create new floor
return true;
}
}
]
});
promptPopup.then((res) => {
if (res) {
this.addNewFloor(this.customFloorName);
}
})
}
In the save onTap() event handler, I would like to access this.customFloorName from my class, to decide whether the user entered input. But it is always undefined. What can I do?
You can get value on Save with below code :
var value = this.scope.$ctrl.customFloorName;