Problem with Tab-View ( router.refreshPage(); )

Hi,

I need some help. when I create a tab-view, I found one problem.

When I add viewTab2.router.refreshPage(); or viewTab3.router.refreshPage();
to my Tab2 / Tab 3 , it won’t reload the new data from URL.

Only Tab1 ( view-main ) is reload every time.

could you please advice, the right way to reload the new data
for each tab.

ps: data from 'web_tab2.php / 'web_tab3.php is a list from database. it need to reload from URL every time user click on each tab.

===part of my app.js ======
var routes = [
// Index page
{
path: ‘/view_tab1/’,
componentUrl: ‘web_tab1.php’,
},
{
path: ‘/view_tab2/’,
componentUrl: ‘web_tab2.php’,
},
{
path: ‘/view_tab3/’,
componentUrl: ‘web_tab3.php’,
},
// Default route (404 page). MUST BE THE LAST
{
path: ‘(.*)’,
url: var_serverurl + ‘/assets/fw7_core5/pages/404.html’,
}
];

var viewTab1 = app.views.create(’#tab-view-tab1’, { url: ‘/view_tab1/’ })
var viewTab2 = app.views.create(’#tab-view-tab2’, { url: ‘/view_tab2/’ })
var viewTab3 = app.views.create(’#tab-view-tab3’, { url: ‘/view_tab3/’ })

$(’#tab-view-tab1’).on(‘tab:show’, function () {
viewTab1.router.refreshPage();
console.log(‘refresh page tab1’);
});

$(’#tab-view-tab2’).on(‘tab:show’, function () {
viewTab2.router.refreshPage();
console.log(‘refresh page tab2’);
});

$(’#tab-view-tab3’).on(‘tab:show’, function () {
viewTab3.router.refreshPage();
console.log(‘refresh page tab3’);
});

You cannot reload routable tab. Learn about tabs: https://framework7.io/docs/tabs.html

1 Like

Just make sure you have disabled cache for views: set componentCache: false and xhrCache: false for each of those Views on init https://framework7.io/docs/view.html#view-parameters

1 Like

Yes! it is working now, I can reload the view every time when click on tab view
Thanks so much for your advice.

1 Like