Load component page from tab, refresh every time


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:


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



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 () {

without refresh method:

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


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.


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