CODEWITHSUNDEEP
ionic-frameworkionic3
Hamed
Hamed

Reputation: 1213

Consecutive Confirmation Alerts in IONIC

I am trying to get two confirmations from user one after another. If the first one is cancelled, there is no need to get the second one. But if the first one is agreed on, then the second one should be shown and processed. I am using a piece of code like this

showConfirmation1() {
  let confirm = this.alertCtrl.create({
    title: 'C1',
    message: "M1",
    buttons: [
      {
        text: 'No',
      },
      {
        text: 'Yes',
        handler: data => {
          this.showConfirmation2(); 
        }
      }
    ]
  });

showConfirmation2() {
  let confirm = this.alertCtrl.create({
    title: 'C2',
    message: "M2",
    buttons: [
      {
        text: 'No',
      },
      {
        text: 'Yes',
        handler: data => {
          this.doYourJob(); 
        }
      }
    ]
  });

If user cancels the first one, everything works fine. If user accepts the first one, the second one is shown properly. However, the second one kinda freezes. Neither its No button nor its Yes button work. It does not even vanishes when you click on other areas of the page.

Upvotes: 1

Views: 806

Answers (1)

robbannn
robbannn

Reputation: 5013

UPDATE:
Found a cleaner solution that requires less code and is easier to understand.
By returning false in the button handler you prevent the alert from closing. And the dismiss-function returns a Promise that gets resolved when the transition is complete. So thats where we will call the function to open the second alert.

showConfirmation1() {
    let confirm = this.alertCtrl.create({
        title: 'C1',
        message: "M1",
        buttons: [
            {
                text: 'No',
            },
            {
                text: 'Yes',
                handler: data => {
                    confirm.dismiss()
                    .then(() => {
                        this.showConfirmation2();
                    });

                    return false;
                }
            }
        ]
    });

    confirm.present();
}

ORIGINAL:

Make use of the dismiss(data:any) function on your first alert. And pass a value that indicates that it was not cancelled. In the onDidDismiss-function check for this value. If its there present the second alert. 

showConfirmation1() {
    let confirm = this.alertCtrl.create({
        title: 'C1',
        message: "M1",
        buttons: [
            {
                text: 'No',
            },
            {
                text: 'Yes',
                handler: data => {
                    confirm.dismiss({ showSecond: true });
                    return false;
                }
            }
        ]
    });

    confirm.onDidDismiss(data => {
        if(data && data.showSecond){
            this.showConfirmation2();
        }
    }

    confirm.present();
}

Upvotes: 1

Related Questions