Ionic 2 Alert issue

Ionic Framework ionic-v3
1

I am trying to click a button and open an alert with some inputs. Check out the setup and the issues are int he comments

...
constructor(app){
    // here I instantiate the Alert for lather use
    this.dataAlert   = this.initiateAlert();
}

onPageDidEnter() {
    this.getSomeData();
}

// this is a function called by a button
// here I attempt to open the alert and here is where the issue occurs
// if I pass "this.dataAlert", the Alert opens fine, but only once. If i close and reopen it, well.. it breaks, nothing happen
// if I pass "this.initiateAlert()", the Alert opens fine every time, but it only has the initial RADIO INPUT (show all), the other inputs are not there
filterContent() {
    this.nav.present(this.dataAlert);
}

// here I initiate the Alert. at this point it only has the OK and CANCEL buttons and one RADIO INPUT
initiateAlert() {
	let alert = Alert.create();
	alert.setTitle('Show only..');
	alert.addInput({type: 'radio', label: 'Show all', value: true, checked: false});
	alert.addButton('Cancel');
	alert.addButton({
		text   : 'Ok',
		handler: data => {
			if (data !== undefined) this.showAll = data;
		}
	});

	return alert;
}

// here I have some data that I use to build the other RADIO INPUT fields on the alert
getSomeData(){
    let data = someData;
    for (var name in data.content) {
        this.dataAlert.addInput({type: 'radio', label: response.title, value: response.name, checked: false});
    }
}

Any ideas?

2

It seems that reusing an alert doesn’t work indeed. I’m not sure if that’s not so by design, but if not - then it seems to be a bug. I never tried to reuse alerts myself, I’m usually creating them as needed.

I would suggest you to store the data instead of storing the alert itself. Then you can recreate the alert every time as needed. And as you have the data you can add the inputs when initializing the alert.

Here is sample code with a few comments:

constructor(app) {
  // Don't initiate the alert here.
  //this.dataAlert = this.initiateAlert();
  // Instead store the data.
  this.data = null;
}

onPageDidEnter() {
  this.getSomeData();
}

filterContent() {
  // Recreate the alert every time.
  this.nav.present(this.initiateAlert());
}

initiateAlert() {
  let alert = Alert.create();
  alert.setTitle('Show only..');
  alert.addInput({type: 'radio', label: 'Show all', value: true, checked: false});
  alert.addButton('Cancel');
  alert.addButton({
    text   : 'Ok',
    handler: data => {
      if (data !== undefined) this.showAll = data;
    }
  });
  
  if (this.data) {
    for (var name in this.data.content) {
      // TODO: Fix the code below as needed, i.e. where does "response" come from..
      this.dataAlert.addInput({type: 'radio', label: response.title, value: response.name, checked: false});
    }
  }

  return alert;
}

getSomeData() {
  // Load the data and store it.
  this.data = someData;
}
1 Like
3

Thanks for the reply. That is what i end up doing… WIll have to see the final version will have this fixed or what.