Init tabs after ajax load a page


#1

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!


#2

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


#3

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!


#4

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