CODEWITHSUNDEEP
javascripteventstabstwitter-bootstrapcoffeescript
sixpounder
sixpounder

Reputation: 145

Twitter Bootstrap tab shown event not firing on page load

In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...

$ ->
    init()

init = ->
    $('a[data-toggle="tab"]').on 'shown', (event) ->
        shown = event.target
        console.log("Showing tab: " + shown)

Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)

I tried adding this to the above script, to see if triggering it manually could work:

$('a[data-toggle="tab"]:first').tab 'show'

... but it didn't.

This is the HTML code I use in my view 

<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#updates" data-toggle="tab"><%=t :updates, :scope => 'user.profile.sections'%></a>
    </li>
    <li class="">
        <a href="#activity" data-toggle="tab"><%=t :activity, :scope => 'user.profile.sections'%></a>
    </li>
    <li class="">
        <a href="#articles" data-toggle="tab"><%=t :articles, :scope => 'user.profile.sections'%></a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="updates">

    </div>
    <div class="tab-pane" id="activity">

    </div>

    <div class="tab-pane" id="articles">

    </div>

</div>
</div>

Any clue?

Upvotes: 14

Views: 23519

Answers (4)

Saul
Saul

Reputation: 93

After my

$("#modal").modal('show');

I added this and it worked just fine:

$('a[data-toggle="tab"]:first').click();

Upvotes: 0

Diego Marcolan
Diego Marcolan

Reputation: 131

You can trigger the event manually when you tell the page to show the tab:

$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");

Upvotes: 13

4lberto
4lberto

Reputation: 555

I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's

In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs

You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs

Upvotes: 0

merv
merv

Reputation: 76780

Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.

JSFiddle

Upvotes: 28

Related Questions