Error with displaying simple toast

I am trying to display a simply toast message from onDeviceReady() function in my app.js file.

function defaultToast(){

app.toast.create({
  text: 'Hello, how are you?',
  destroyOnClose:true,
  on: {
    opened: function () {
      console.log('Toast opened')
    }
  }
}).open();

}

function onDeviceReady() {

defaultToast()

}

I am get this this error:

Uncaught TypeError: Cannot read property ‘create’ of undefined

Even when i tried to run the below code within the onDeviceReady(), I could this error too:

Uncaught TypeError: Cannot read property ‘toast’ of undefined

this.$app.toast.show({

backdrop: true,   
disableUserInteraction: false, 

icon: '<i class="material-icons">check_circle</i>',
text: __('__PLACEHOLDER_CONFIRM_ITEM_SAVED__'),
position: 'center',
closeTimeout: 1500,
on: {
close: function() {
    this.app.views.current.router.back();
}
}

});

What should I define to make each of these functions to run?

Note I have the initial definition on top of the file:

import Vue from ‘vue’;
import Framework7 from ‘framework7/framework7.esm.bundle.js’;
import Framework7Vue from ‘framework7-vue/framework7-vue.esm.bundle.js’;
import ‘framework7/css/framework7.bundle.css’;
import App from ‘…/components/app.vue’;
Framework7.use(Framework7Vue,lodash);

if(!newapp){
newapp = // Init App
new Vue({
el: ‘#app’,
render: (h) => h(App),
store,
// Register App Component
components: {
app: App
},
});
}

Thanks

Nosa Osahon

Framework7 is not yet defined when onDeviceReady is called. You should add your code to Framework7 init function on initialization, somethinf like this:

var myApp = new Framework7({
  ...
  on: {
    init: function() {
      // add toast function here
    }
  }
});

Hi Tim,

This is now my definition:

if(!newapp){

newapp = // Init App

new Vue({

  el: '#app',

  render: (h) => h(App),

  store,

  // Register App Component

  components: {

    app: App

  },

  on: {

    init: function showToastBottom(text){

      // add toast function here

        if (!self.toastBottom || self.toastBottom.destroyed) {

          self.toastBottom = self.$f7.toast.create({

            text: text,

            closeTimeout: 2000,

            destroyOnClose: true

          });

        }

        // Open it

        self.toastBottom.open();

      

    }// end of showToastBottom

  }

});

}

But now getting this error:

TypeError: Cannot read property ‘showToastBottom’ of null

I tried the definition as you suggested but got error that framework7 has already be initialized and cannot be initialized more than once.

What can I do in this case?

Thanks

Nosa Osahon

I don’t understand your app structure, did you create it with F7 CLI? Did you include version of F7 that actually includes Toast component (e.g. bundle version) ?

Hi nolimits4web,

This is the command i used to create it:

framework7 create --ui

Then in the UI I picked vue variant of framework7 and cordova option because I wanted apps also.

The below segment of code is working within the program.

showToastBottom(text) {

  const self = this;

  // Create toast

  if (!self.toastBottom || self.toastBottom.destroyed) {

    self.toastBottom = self.$f7.toast.create({

      text: text,

      closeTimeout: 2000,

      destroyOnClose: true

    });

  }

  // Open it

  self.toastBottom.open();

}

This means that toast is bundled or if there is other way to check let me know.

My observation is that whenever and wherever i call the toast request within the below OnMessage segment I get error message either toast is not defined or create is not defined.

cordova.plugins.firebase.messaging.onMessage(function(payload) {

//alert("messagereceived" + JSON.stringify(payload.gcm.body));
 showToastBottom(payload.gcm.body)

});

I put the cordova segment of code in the created hook and the toast function in mounted life cycle, I got the same error message.

But if I comment the request to toast and uncomment the alert statement, that works fine. We prefer toast command to give user good experience.

Thanks

Nosa Osahon

Then i guess you have some wrong structure/order and you try to call F7’s APIs BEFORE it was initialised, it gets initialised when root component mounted. Try to wrap your toast calling APIs with this.$f7ready:

showToastBottom(text) {

  const self = this;

  self.$f7ready(() => {
    // Create toast

    if (!self.toastBottom || self.toastBottom.destroyed) {

      self.toastBottom = self.$f7.toast.create({

        text: text,

        closeTimeout: 2000,

        destroyOnClose: true

      });

    }

    // Open it

    self.toastBottom.open();
  })
}

Hi nolimits4web,

See the definitions:

methods: {

showToastBottom(text) {

  const self = this;

  self.$f7ready(f7 => {

    // Create toast

    if (!self.toastBottom || self.toastBottom.destroyed) {

      self.toastBottom = self.$f7.toast.create({

        text: text,

        closeTimeout: 2000,

        destroyOnClose: true

      });

    }

    // Open it

    self.toastBottom.open();

  });

},

}

methods: {

showToastBottom(text) {

  const self = this;

  self.$f7ready(() => {

    // Create toast

    if (!self.toastBottom || self.toastBottom.destroyed) {

      self.toastBottom = self.$f7.toast.create({

        text: text,

        closeTimeout: 2000,

        destroyOnClose: true

      });

    }

    // Open it

    self.toastBottom.open();

  });

},

}

Then the error logs

file:///android_asset/www/cordova.js: Line 306 : TypeError: Cannot read property ‘showToastBottom’ of null
at file:///android_asset/www/js/app.js:2:2159110
at Object.callbackFromNative (file:///android_asset/www/cordova.js:287:58)
at :1:9
2020-05-04 22:20:50.117 4263-4263/com.gists.city I/chromium: [INFO:CONSOLE(306)] “TypeError: Cannot read property ‘showToastBottom’ of null
at file:///android_asset/www/js/app.js:2:2159110
at Object.callbackFromNative (file:///android_asset/www/cordova.js:287:58)
at :1:9”, source: file:///android_asset/www/cordova.js (306)
2020-05-04 22:20:50.117 4263-4263/com.gists.city D/SystemWebChromeClient: file:///android_asset/www/cordova.js: Line 308 : Uncaught TypeError: Cannot read property ‘showToastBottom’ of null
2020-05-04 22:20:50.117 4263-4263/com.gists.city I/chromium: [INFO:CONSOLE(308)] “Uncaught TypeError: Cannot read property ‘showToastBottom’ of null”, source:

Thanks

Nosa Osahon

Hi ,

I just tried this;

mounted() {

this.$store.dispatch("getTotalMessage");

this.$f7ready(f7 => {

  cordova.plugins.firebase.messaging.onMessage(function(payload) {

    //alert("messagereceived" + JSON.stringify(payload.gcm.body));

    this.$f7.showToastBottom(payload.gcm.body);

  });

});

That is calling the toast function with $F7:

But still giving this error:

at Object.callbackFromNative (file:///android_asset/www/cordova.js:287:58)
at :1:9
2020-05-05 01:45:38.741 5416-5416/com.gists.city I/chromium: [INFO:CONSOLE(306)] "TypeError: Cannot read property ‘$f7’ of null
at file:///android_asset/www/js/app.js:2:2159110

Could the plugin the one cause this issue?

Thanks

Nosa Osahon