Init tabs after ajax load a page

Hello folks,

I am using Framework7 Version 2.3.1 and have some issue regarding view with tabs

I have tabs on index.html page:

<div class="page">
<div class="page-content">
    <div class="toolbar tabbar">
        <div class="toolbar-inner">
            <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
            <a href="#tab-2" class="tab-link">Tab 2</a>
            <a href="#tab-3" class="tab-link">Tab 3</a>
        </div>
    </div>
    <div class="tabs">
        <div id="tab-1" class="page-content tab tab-active">
            <div class="block">
                <p>Tab 1 content</p>
                ...
            </div>
        </div>
        <div id="tab-2" class="page-content tab">
            <div class="block">
                <p>Tab 2 content</p>
                ...
            </div>
        </div>
        <div id="tab-3" class="page-content tab">
            <div class="block">
                <p>Tab 3 content</p>
                ...
            </div>
        </div>
    </div>
</div>

Route is following:

{
    path: '/tabbed-view/',
    templateUrl: './pages/index.html',
}, 

if I load the page on refresh everything works fine, but if I load page on click
tabs are visible but not working - if I click on one tab nothing happens.

So, I guess I need to to initialize tabs after page is loaded?
but I can not find option for that.
Can you please give me some solutions for this?
Thanks!

They must be initialized automatically, will be good to see live example or JSFiddle with the issue to understand what happens there

Hi, sorry I didn’t explain well.
Actually I have dynamic routes with {id}

{
    path: '/tabbed-view/:id',
    templateUrl: './pages/index.html',
}, 

in left menu there is an list with several links. Every link open index.html page with new data but same tabs…
So I solve the issue when I add different ID for every tab on every opened page:

<div class="page">
<div class="page-content">
    <div class="toolbar tabbar">
        <div class="toolbar-inner">
            <a href="#tab-1{{id}}" class="tab-link tab-link-active">Tab 1</a>
            <a href="#tab-2{{id}}" class="tab-link">Tab 2</a>
            <a href="#tab-3{{id}}" class="tab-link">Tab 3</a>
        </div>
    </div>
    <div class="tabs">
        <div id="tab-1{{id}}" class="page-content tab tab-active">
            <div class="block">
                <p>Tab 1 content</p>
                ...
            </div>
        </div>
        <div id="tab-2{{id}}" class="page-content tab">
            <div class="block">
                <p>Tab 2 content</p>
                ...
            </div>
        </div>
        <div id="tab-3{{id}}" class="page-content tab">
            <div class="block">
                <p>Tab 3 content</p>
                ...
            </div>
        </div>
    </div>
</div>

I guess that is normal behavior :slight_smile:
Maybe there should be container that wraps tabs to avoid this case?
If you have any suggestion how to better structure a page please send it.
Thank you!

Yeah, it is right approach, they need to be unique