Radio Alert

Ionic Framework ionic-v3
1 
constructor(public nav: NavController) {
    this.storage = new LocalStorage();
    this.site = this.storage.get("nsSite");
    if(this.site.value == null) {
      console.log(this.site);
      console.log("no site set");
      this.doRadio();
    }


  doRadio() {
    let alert = Alert.create();
    alert.setTitle('Select Site');
    alert.addInput({type: 'radio', label: '1', value: '1', checked: true});
    alert.addInput({type: 'radio', label: '2', value: '2'});
    alert.addInput({type: 'radio', label: '3', value: '3'});
    alert.addInput({type: 'radio', label: '4', value: '4'});
    alert.addButton('Cancel');
    alert.addButton({
      text: 'OK',
      handler: data => {
        console.log('Site:', data);
        this.plantRadioOpen = false;
        this.plantRadioResult = data;

        this.storage.set("nsSite", data);
        this.site = data;
      }
    });

why does this return too a blank screen instead of the template. if i take out this.doRadio() the template loads just fine. do i need to do something else?

1 Like
2

In the code-fragment above the closing bracket of the constructor is missing. I can’t tell if this is the problem though, because the source code is not complete and you might removed it by mistake when pasting. I would recommend you to use an editor with syntax checking and Intellisense support such as VS Code.

3

that was just me not copying and pasting the whole thing. its there in the actual program… but good eye. Other thoughts? Its like once the doRadio runs it never finishes rendering the view.

4

Without seeing the complete code of the doRadio() method (because it’s also only partial code sample) I can only guess why it’s not working. But most probably there’s an error in your code/implementation or you’re missing an import. The reason for the blank screen is something related to the following issue, I guess:

5

Sorry, i kind of forgot about this issue, i was working on something else. So here is my full code

ngOnInit(){
     if(this.site == null) { this.doRadio();}
}
public doRadio() {
    let alert = Alert.create();
    alert = Alert.create();
    alert.setTitle('Select Site');
    alert.addInput({type: 'radio', label: '1', value: '1', checked: true});
    alert.addInput({type: 'radio', label: '2', value: '2'});
    alert.addInput({type: 'radio', label: '3', value: '3'});
    alert.addInput({type: 'radio', label: '4', value: '4'});
    alert.addButton('Cancel');
    alert.addButton({
      text: 'OK',
      handler: data => {
        alert.dismiss();
        this.site = data;
        this.storage.set("nsSite", data);
        return false;
      }
    });

    this.nav.present(alert);
  }
  public calculate(){
    var temp: any;
    if(this.site == null) {
      this.doRadio();
    }
    for(let crew of this.crews){
      temp = this.sc.shift(this.dt, crew.id, this.site);
      crew.shift = temp.name;
      crew.day = temp.day;
      crew.hours = temp.hours;
      crew.plus = temp.plus;
    }
  }
}

So the problem is that when doRadio runs, i do in fact get the alert. user can then change to one of the 4 options and the data is set in localstorage. The alert closes and the app is no longer usable. Its as if everything is frozen. Like the alert modal has still taken control even though its no loner visible

6

To fix this ive discovered you just have to add

this.nav.push(ThePage);

to the handler

7

Thank you for you code, it really helped me with my problem.

I solved your issue I just added

alert.present(prompt);