Refresh page after Modal is closed

I have the following app:

The “plus” icon opens a Modal that enables the user to register an entry. In that Modal there is a button that saves the entry on the SQLite database and closes the modal. However, the page on the screenshot doesn’t update after that with the newest entry.

The code of home.ts that shows the registered entries is this:

  constructor(private modalCtrl: ModalController) {
    this.db = new Storage(SqlStorage, {
      name: "banco"
    });
    let tabela = "tarefas(id INTEGER PRIMARY KEY AUTOINCREMENT, dataconclusao DATE, atividade TEXT, descricao TEXT, conteudo TEXT, statusTarefa INTEGER)"; 
    this.db.query(`CREATE TABLE IF NOT EXISTS ${tabela}`); {
      console.log("Banco de dados criado.");
    }
    this.getAtividades();
  }

  getAtividades() {
    this.db.query("SELECT * FROM tarefas").then((resposta) => {
      let resultado = resposta.res.rows;
      for (let i = 0; i < resultado.length; i++) {
        this.listaAtividades.push({
          id: resultado.item(i).id,
          atividade: resultado.item(i).atividade,
          statusTarefa: resultado.item(i).statusTarefa,
          descricao: resultado.item(i).descricao      
        });
      }
    });
  }

Is there a way to make Ionic refresh the page when the modal is closed? A suggestion that someone gave me is that I passed a array back to the page with the updated values, but since I query the content directly from SQLite, I wanted to just refresh the page and it would update everything. A friend of mine solved the issue implementing onDidDismiss but I really didn’t get how that works.

Any suggestions?

1 Like

Hey!

onDidDismiss is what you are looking for.

 onModalOpen() {

    let modal = this.modalCtrl.create(YourModal, params);
    modal.onDidDismiss(() => {
      this.getAtividades();
    });
    modal.present();
  }

You can also pass options when you dismiss the modal, so you dont have to make query again:

onModalOpen() {

    let modal = this.modalCtrl.create(YourModal, params);
    modal.onDidDismiss(() => {
      this.getAtividades();
    });
    modal.present();
  }
addActivity(activity) {
    this.listaAtividades.push(activity);
 }

and when you dismiss the modal

dismiss() {
   let data = { 'foo': 'bar' };
   this.viewCtrl.dismiss(data);
 }
11 Likes

thanks, it works! but when the modal closes it adds again the values already on the database. I guess I implemented my query wrong? i’m accepting suggestions

Check my answer above again. Don’t make another query
however if you want to do so you should clean up you list first


getAtividades() {

    this.db.query("SELECT * FROM tarefas").then((resposta) => {
      let resultado = resposta.res.rows;
      // Clean your Actividades list
      this.listaAtividades = [];
      // Edit ends here
      for (let i = 0; i < resultado.length; i++) {
        this.listaAtividades.push({
          id: resultado.item(i).id,
          atividade: resultado.item(i).atividade,
          statusTarefa: resultado.item(i).statusTarefa,
          descricao: resultado.item(i).descricao      
        });
      }
    });
  }


1 Like

now it works like a charm. thank you for your time

Excelente lo que estaba buscando!!!