Load component page from tab, refresh every time

Questions
1

I am trying to build an app with tabs for navigation and component pages where clicking one tab must refresh the data shown on the page. In the example framework7-template-tabs the Cataglog page only get initPage called when the application is started, not every time user clicks on the Catalog tab.

I created a StackOverflow question but maybe this forum will be more appropriate:

https://stackoverflow.com/questions/48225738/framework7-dynamically-load-component-page-from-tab

Also here is a live demo showing what I managed so far:

http://f7-navigate-component-question.surge.sh/

2

In 2.0.6 release there is a new router.refreshPage method. You can call it when tab becomes visible:

var viewCatalog = ...;
$('#view-catalog').on('tab:show', function () {
  viewCatalog.router.refreshPage();
});

without refresh method:

$('#view-catalog').on('tab:show', function () {
  viewCatalog.router.navigate(viewCatalog.router.currentRoute.url, {
    reloadCurrent: true,
    ignoreCache: true
  });
});
3 Likes
3

Thank you! I did not know about the event, tab:show event, it is very useful.

The first suggestion did not work because of missing function refreshPage. I see now my version of f7 is 2.0.1 so that must be the reason.

But the second suggestion did exactly what I wanted after changing to $$ in the beginning.

I will update f7 to the latest version now.

4

now that you are working with tabs, how do you display json data in tabs?