[SOLVED] Page events on Tabbed Views template

Questions
1

Hello, I’m new with f7 and I used the Tabbed Views template to start my app

I’m tryin to make a JSON request when on the second tab on page Init but It fires in app load on home tab view…

How to achieve this ?

thanks

2

Because page in hidden tab got initialised on app load. You need to to JSON request then when required View becomes visible, e.g.

$('#view-catalog').on('tab:show', function () {
  // do request here
});
3

Thanks for the reply, but I don’t really understand how to fetch my data and use it in the tab view ?
In my code I have :

var app = [...]
on: {
    pageBeforeIn: function (page){
      app.request.promise.json('api_url')
      .then(function (data) {
        console.log(data)
        app.data.events = data;
      });
    }
  },

Then in my component :

return {
    data: function () {
      var events = app.data.events
      console.log(this.$app.data.events)

      return {
        events: this.$root.events
      };
    }
  };

I got “undefined” but in the console.log I can see it…

4

From what i see you code will not work anyway, as you fetch data in main app data, and you reference it in pageBeforeIn callback, if this is a one of the initial pages, i guess XHR request is not completed when page loaded. Just put the data fetch in same page component, e.g. in same pageBeforeIn or pageIni event:

return {
    data: function () {
      return {
        events: null,
      };
    },
    on: {
      pageInit() {
        var self = this;
        app.request.promise.json('api_url')
          .then(function (data) {
            self.$setState({ events: data })
          });
      },
    }
  };
1 Like
5

Oh ok, I got it now my bad ! Thanks a lot !