Skip to content

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 = ->
    $('a[data-toggle="tab"]').on 'shown', (event) ->
        shown =
        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 class="">
        <a href="#activity" data-toggle="tab"><%=t :activity, :scope => 'user.profile.sections'%></a>
    <li class="">
        <a href="#articles" data-toggle="tab"><%=t :articles, :scope => 'user.profile.sections'%></a>

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

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


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



Any clue?


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.