Stop alertCtrl auto triggering cancel in Ionic 2 - javascript

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

Related

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

How to use JConfirm with conditionals?

Is it possible to use the JConfirm Plugin with if statements to show different buttons within a popup or will it just need to be hard coded?
I had planned in my head something like the following:
if account activated
-> yes, display a deactivate button
-> no, display a activate button
Which would code up something like the following:
$.confirm({
icon: 'fas fa-users',
title: 'User Account: $name',
content: 'What would you like to do with this account?',
buttons: {
View: {
btnClass: 'btn-info',
text: 'View Profile',
action: function () {
// Take them to a link
}
},
Upgrade: {
btnClass: 'btn-info',
text: 'Upgrade to Tutor',
action: function () {
$.alert('Account successfully upgraded!');
}
},
Ban: {
btnClass: 'btn-danger',
text: 'Ban Account',
action: function () {
$.alert('Account has now been banned :(');
}
},
if(activated === '1'){
Deactivate: {
btnClass: 'btn-warning',
text: 'Deactivate Account',
action: function () {
$.alert('Account has now deactivted :(');
}
}
} else {
Deactivate: {
btnClass: 'btn-warning',
text: 'Activate Account',
action: function () {
$.alert('Account has now deactivted :(');
}
}
}
Reset: {
btnClass: 'btn-success',
text: 'Reset Password',
action: function () {
$.alert('User has been e-mailed a forgotten password link');
}
},
Close: {
btnClass: 'btn-default',
text: 'Close'
}
}
});
This code does not work presently, what would be a possible way of going about this?

jquery-confirm pause script if more than one $.confirm are present

I've a form with submit validation.
I'dd like to add more than 1 alerts on form submit with:
var proceed = true;
$.confirm({
title: 'Confirm 1',content: 'No products added. Are you sure to proceed?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
}
},
cancel: {
text: "Cancel",
action: function () {
proceed = false;
return false;
}
}
}
});
... some others checks ....
if ( !proceed ) { return false;} //EXIT SCRIPT
// IF ALL CHECKS PASSED
$.confirm({
title: 'Final confirm',content: 'All checks are ok. Are you sure to insert?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
form.submit(); //SUBMIT THE FORM
}
},
cancel: {
text: "Cancel",
action: function () {
// CLOSE DIALOG
}
}
}
});
but on form submit I get all of 2 $.confirm opens! I'd like to pause second one until I click OK on the first one.
My jsfiddle https://jsfiddle.net/st1cqb39/2/
Make the finalConfirm function as a generic one, and call it in the action callback (of your empty check) accordingly.
Here is a DEMO: https://jsfiddle.net/st1cqb39/3/
Hope this helps!

how to dismiss an alert in React Native?

I am using an Alert , and when i am navigating to previous screen on clicking of ok button this alert is not dismissing.
its showing up again in that back screen.
How i can stop this alert showing up again.
I am trying this code.
showErrorAlert = () => {
Alert.alert(
CONSTANTS.SOME_ERROR_OCCURED,
'',
[{ text: 'OK', onPress: () => this.loggingOut() },],)
};
loggingOut = () => {
console.log("coming here");
};
Can you please try the following code, you can try adding { cancelable: false }.
For more information go here
showErrorAlert = () => {
Alert.alert(
CONSTANTS.SOME_ERROR_OCCURED,
'',
[{ text: 'OK', onPress: () => this.loggingOut() },],
{ cancelable: false })
};
loggingOut = () => {
console.log("coming here");
};

Confirm DatePicker time change

So I have a DatePicker that I can change a certain field with, but I want it to update the HTML only when the user confirms the change.
However, currently, when I use the (ionChange) event in my ion-datetime element, it updates the UI automatically before my confirmation alert pops up.
How can I make it so that the value in my date picker will only change when the user presses confirm?
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [{
text: 'Cancel',
handler: () => {
console.log('cancel');
}
}, {
text: 'Confirm',
handler: () => {
console.log(startTime);
}
}]
});
alert.present();
}
<ion-item detail-push>
<ion-label><b>Start: </b></ion-label>
<ion-datetime displayFormat="hh:mm A"
[(ngModel)]="item.EventStart"
(ionChange)="updateStartTime(item.EventStart)"></ion-datetime>
</ion-item>
You could just do a trick by keeping the old value of the EventStart. I added two code samples. First one will update the HTML but it will only keep the updated value if click on confirmation, otherwise it will set DatePicker to old value back. Second one will work as you expected but I don't know your value of item.EventStart is look like. I just guess it would something similar to this pattern '00:00'. Sample codes will worth you than explanation in words :).
First one
public oldEventStart = this.item.EventStart;
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [
{
text: 'Cancel',
handler: () => {
this.item.EventStart = this.oldEventStart;
console.log('cancel');
}
},
{
text: 'Confirm',
handler: () => {
this.item.EventStart = startTime;
this.oldEventStart = startTime;
console.log(startTime);
}
}
]
});
alert.present();
alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; });
}
Second one
public oldEventStart = this.item.EventStart;
updateStartTime(startTime) {
this.item.EventStart = new Date('2000-01-01T'+this.oldEventStart+':00.00').toISOString();
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [
{
text: 'Cancel',
handler: () => {
this.item.EventStart = this.oldEventStart;
console.log('cancel');
}
},
{
text: 'Confirm',
handler: () => {
this.item.EventStart = startTime;
this.oldEventStart = startTime;
console.log(startTime);
}
}
]
});
alert.present();
alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; });
}
Hope this will help to solve your problem. Cheers!.
When I use a bootstrap dialog I would use a prevent default. Try to change the following: updateStartTime(startTime) to updateStartTime(startTime,e) and then on your first line in that function add e.preventDefault(); See if that helps. You should then be able to do whatever you like in your cancel and confirm handlers.
Just return false in your updateStartTime function, so that the default datepicker handler that is bound to the change event does not get called. Like this:
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [{
text: 'Cancel',
handler: () => {
console.log('cancel');
}
}, {
text: 'Confirm',
handler: () => {
console.log(startTime);
}
}]
});
alert.present();
/** prevent default datepicker behavior **/
return false;
}

Categories

Resources