I have a method that checks if any property of object in array is equal to 'not ready'. If it is it should inform user about that and ask if he still wishes to continue. If no, there is return that breaks the method and if yes, method continues and there is one more confirm dialog
createOrder() {
if(this.orders.filter(e => e.statusName === 'not ready').length > 0){
this.confirmationService.confirm({
message: 'There is already ongoing order. Do you want start another?',
header: 'Order',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
key: 'ongoin',
accept: () => {
},
reject: () => {
return
}
})
}
this.confirmationService.confirm({
message: 'Are you sure?',
header: 'Order',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
key: 'confirm',
accept: () => {
*//add object code*
}
});
This how it looks like in html:
<button pButton tooltipPosition="left" (click)="createOrder()" icon="fa fa-plus-square"
class="ui-button-warning">
</button>
<p-confirmDialog key='ongoin'></p-confirmDialog>
<p-confirmDialog key='confirm'></p-confirmDialog>
My problem is that both confirm dialogs shows up at the same time. I guess it is because of using twice in html. But if i change that to
<p-confirmDialog></p-confirmDialog>
Only the first one works ('There is already ongoin...') and second one('Are you sure') after clicking yes doesn't show up. How do I make it work?
You should be calling the second dialog after the confirmation happens. Which happens in accept or reject callbacks. But you are immediately calling this.confirmationService.confirm again and it is causing both dialogs to be shown.
You should be having something like below :
createOrder() {
if(this.orders.filter(e => e.statusName === 'not ready').length > 0){
this.confirmationService.confirm({
message: 'There is already ongoing order. Do you want start another?',
header: 'Order',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
key: 'ongoin',
accept: () => {
// do something here
this.showAnotherDialog();
},
reject: () => {
// if you want to show another dialog on reject you should call it here
return
}
})
} else {
this.showAnotherDialog();
}
}
showAnotherDialog() {
this.confirmationService.confirm({
message: 'Are you sure?',
header: 'Order',
icon: 'fa fa-exclamation-triangle',
acceptLabel: 'Yes',
rejectLabel: 'No',
key: 'confirm',
accept: () => {
*//add object code*
}
});
}
Related
I am using PrimeNg with Angular 6 to generate a confirmation box on deleting an item from a form, and saving all changes made to the form. When
delete() {
this._confirmationService.confirm({
message: 'Delete Item?',
key: 'delete',
accept: () => {
// code to delete row
}
});
}
submit() {
this._confirmationService.confirm({
message: 'Save Changes',
key: 'submit',
accept: () => {
// code to save changes
}
});
}
html
<button pButton (click)="delete()"></button>
<button pButton (click)="submit()"></button>
<p-confirmDialog key="delete"></p-confirmDialog>
<p-confirmDialog key="submit"></p-confirmDialog>
When not using a key, both buttons call the submit confirm function. While using keys, the submit button calls the submit confirmation but gets stuck in a loop when accepted, and the delete function calls the submit confirmation then, if rejected, calls the delete confirmation.
What do I need to do so only the confirmation service specific to the function is called?
I had a similar issue when rejecting the confirmation dialog, I had to click like 10 times to exit the dialog.
It turns out that I was simply missing the confirmationService.close() on the reject event:
confirmDelete(index: number): void {
this.confirmationService.confirm({
message: 'Are you sure you want to delete the parameter?',
accept: () => {
this.deleteParameter(index);
},
reject: () => {
this.confirmationService.close();
}
});
}
Try this code :
HTML:
<button type="button" (click)="delete()" pButton icon="pi pi-check" label="Delete">
</button>
<button type="button" (click)="submit()" pButton icon="pi pi-times" label="Submit">
</button>
<p-confirmDialog ></p-confirmDialog>
TS:
submit() {
this.confirmationService.confirm({
message: 'Are you sure that you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
//message here
},
reject: () => {
//message here
}
});
}
delete() {
this.confirmationService.confirm({
message: 'Do you want to delete this record?',
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
accept: () => {
//message here
},
reject: () => {
//message here
}
});
}
Try this code:
HTML:
<p-confirmDialog id="deleteSelecteddomains" key="multiple" [style]="{width: '450px'}"></p-confirmDialog>
<p-confirmDialog id="deleteDomain" key="single" [style]="{width: '450px'}"></p-confirmDialog>
TS:
deleteDomain(domain: Domain) {
this.confirmationService.confirm({
message: 'Are you sure you want to delete ' + domain.name + '?',
header: 'Confirm',
icon: 'pi pi-exclamation-triangle',
key:'single',
accept: () => {
this.domains = this.domains.filter(val => val.id !== domain.id);
this.domain = {};
this.messageService.add({ severity: 'success', summary: 'Successful', detail: 'Domain Deleted', life: 3000 });
},
reject: () => {
this.confirmationService.close();
}
});
}
deleteSelectedDomains() {
this.confirmationService.confirm({
message: 'Are you sure you want to delete the selected domains?',
header: 'Confirm',
icon: 'pi pi-exclamation-triangle',
key:'multiple',
accept: () => {
this.domains = this.domains.filter(val => !this.selectedDomains.includes(val));
this.selectedDomains = null;
this.messageService.add({severity:'success', summary: 'Successful', detail: 'Domains Deleted', life: 3000});
},
reject: () => {
this.confirmationService.close();
this.messageService.add({severity:'error', summary: 'Error', detail: 'Domains Deleted Failed', life: 3000});
}
});
You should define the type on the buttons as "button" this will keep your browser from picking a type (IE generally picks the type of button, while others will pick submit). I would also suggest renaming your submit function as naming this submit may be overriding the default submit event that the submit buttons are tied to.
I am trying to use Bootbox within an Angular2 application. I have the following code:
bootbox.confirm({
message: "Are you sure you want to complete this action?",
buttons: {
confirm: {label: 'Yes', className: 'btn-success'},
cancel: {label: 'No', className: 'btn-danger'}
},
callback: function (result: any) {
console.log('Response equals: ' + result);
}
});
The confirm box displays correctly when called and when clicking on either the "yes" or "no" button the confirm box disappears as it should. However, the callback function is not firing because I'm not getting the console message.
This is my first attempt trying to inject Bootbox into an application so I'm not sure why the callback function is not being called.
Any ideas?
Have you tried with function(result) remove ':any'.
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
http://bootboxjs.com/examples.html#bb-confirm-dialog. Call back takes only one argument that is result.
I've got an alert controller that, when triggered, opens and then immediately closes without me doing anything.
let alert = this.alertCtrl.create({
title: 'Requires Login',
message: 'Please register or log in to add to cart.',
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Login',
handler: () => {
this.logOut();
}
}
]
});
alert.present();
I can't find anything wrong and I'm wondering what is causing this issue? When I run the application through my phone I get the error, but when I run it through the browser, no error.
Here's a working example from my current project
logout() {
let confirm = this.alertCtrl.create({
title: 'Confirm',
message: 'Are you sure you want to logout?',
buttons: [
{
text: 'No',
handler: () => { }
},
{
text: 'Yes',
handler: () => {
this.removeNotificationRegistrationAndLogOut(LoginPage, true);
}
}
]
});
confirm.present();
}
I have a dialog.showMessageBox that works well and do what I tell it to do.
electron.dialog.showMessageBox({
type: 'info',
buttons: ['Yes', 'No'],
message: 'Are you sure?',
}, resp => {
if (resp === 0) {
// User selected 'Yes'
foo.bar();
}
});
But it's annoying to answer each times this function is called, I'd like to insert a "Never ask me again" like this.
electron.dialog.showMessageBox({
type: 'info',
buttons: ['Yes', 'No'],
message: 'Are you sure?',
checkboxLabel: 'Never ask me again',
checkboxChecked: false
}, resp => {
if (resp === 0) {
// User selected 'Yes'
foo.bar();
}
});
The documentation says that the boolean checkboxChecked can be used in the callback function but I'd like to know how to make it global so that the question isn't ask anymore.
Ok so here's what I've done:
const settings = require('electron-settings');
settings.set('neverAskMeAgain', {
state: false
});
if (!settings.get('neverAskMeAgain.state')) {
electron.dialog.showMessageBox({
type: 'info',
buttons: ['Yes', 'No'],
message: 'Are you sure?',
checkboxLabel: 'Never ask me again',
checkboxChecked: false
}, (resp, checkboxChecked) => {
if (resp === 0) {
foo.bar();
settings.set('neverAskMeAgain.state', checkboxChecked);
}
});
} else if (settings.get('neverAskMeAgain.state')) {
foo.bar();
}
} else {
foo.bar();
}
It works like a charm within an instance of the app when running npm install && npm start but when I quit it and relaunch it, the dialog box is displayed again...
I would recommend using a lib named electron-settings. Link here.
That way, your code would look something like that:
const settings = require('electron-settings');
electron.dialog.showMessageBox({
type: 'info',
buttons: ['Yes', 'No'],
message: 'Are you sure?',
checkboxLabel: 'Never ask me again',
checkboxChecked: false
},
resp => {
if (resp === 0) {
// User selected 'Yes'
settings.set('never_ask_again_answer', true);
foo.bar();
}
});
// get the answer later
let answer = settings.get('never_ask_again_answer')
EDIT: I think it doesn't work when you restart because you're just setting it to false again right at the start. Little fix will do:
const settings = require('electron-settings');
if(!settings.has('neverAskMeAgain')){ // this if might do it
settings.set('neverAskMeAgain', {
state: false
});
}
if (!settings.get('neverAskMeAgain.state')) {
electron.dialog.showMessageBox({
type: 'info',
buttons: ['Yes', 'No'],
message: 'Are you sure?',
checkboxLabel: 'Never ask me again',
checkboxChecked: false
}, (resp, checkboxChecked) => {
if (resp === 0) {
foo.bar();
settings.set('neverAskMeAgain.state', checkboxChecked);
}
});
} else if (settings.get('neverAskMeAgain.state')) {
foo.bar();
}
I have the following jQuery using the noty plugin and plum shopping cart jQuery. The first block of code correctly alerts a yes / no and empties the cart correctly.
The second block of code shows the yes / no message correctly using noty BUT it does not return the true / false so the cart isnt emptied.
Im really new to jQuery so I'm probably missing something obvious ! Any help would be appreciated:
//This works..
emptycart: function () {
if (!confirm('Are you sure you want to empty your cart?')) {
return false;
}
},
//This doesnt work..
emptycart: function () {
confirm.call(this, noty({
text: 'Are you sure you want to empty the cart ?',
buttons: [
{type: 'button green', text: 'Ok', click: function() { return false; } },
{type: 'button pink', text: 'Cancel', click: function() { return true; } }
],
closable: false,
timeout: false
}),
true
);
return false;
},
Well, the plugin is receiving callbacks, so when you use callbacks you must think in a asynchronous way.
/**
* #param {function} onConfirm : Receives true or false as argument, depending on the user choice
*/
emptycart: function (onConfirm) {
confirm.call(this, noty({
text: 'Are you sure you want to empty the cart ?',
buttons: [
{
type: 'button green',
text: 'Ok',
click: function() {
//Do other stuff if you want...
onConfirm(true);
}
},
{
type: 'button pink',
text: 'Cancel',
click: function() {
//Do other stuff if you want...
onConfirm(false);
}
}
],
closable: false,
timeout: false
}), true);
}
Above, you will send a callbackfunction "onConfirm" which will be called when the user clicks on either buttons. The function will receive one boolean argument telling if was a click on Ok or Cancel.