Bootstrap shown.bs.tab event not working

Question

I'm using the Flexy template (using bootstrap) and I can't get the shown.bs.tab event on tab to work.

I've managed to make it work on JSFiddle.

Here is the code I use in my template that produce nothing :

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="chart1">Tab 1 Content</div>
    <div class="tab-pane" id="chart2">Tabe 2 Content</div>
  </div>
</div>

<script>
  $(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      alert(e.target.href);
    })
  });
</script>

What can I miss ? If I copy/paste this code on the Flexy code it doesn't work. What are the steps to understand what is wrong ? Thanks !

Solution 1

The issue was more a rails-related one.

I ended up by removing one by one every piece of code since the issue was not there in the raw template as @KyleMit says.

Whenever I remove the line //= require bootstrap-sprockets from my application.js file the issue disappears !

The issue was that I was requiring both bootstrap and bootstrap-sprockets. I should have require just one of them but not both.

Solution 2

Bootstrap tab events are based off the .nav-tabs elements, not the .tab-content elements. So in order to tap into the show event, you need the element with an href that is pointed towards #tab1, not the #tab1 content element itself.

So instead of this:

$('#tab1').on('shown.bs.tab', function (e) {
    console.log("tab1");
});

Do this instead:

$('[href=#tab1]').on('shown.bs.tab', function (e) {
    console.log("tab1");
});

Or, to capture all of them, just do this:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log(e.target.href);
})

Demo in Stack Snippets

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log(e.target.href);
})

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="chart1">Tab 1 Content</div>
    <div class="tab-pane" id="chart2">Tabe 2 Content</div>
  </div>
</div>

Solution 3

If the Tab is dynamic in anyway try using

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert(e.target.href);
})

Solution 4

In my case, there was a conflict between Jquery and Bootstrap.

I solved the problem with jQuery.noConflict(). See below!

I hope that helps!

// Issue @ tabs toggle 
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert(e.target.href);
});

View more solutions

Comments

[ZazOufUmI]

Thanks for your detailed answer ! I understand what you said but unfortunately it still doesn't work, there must be something else somewhere ... I created a test page so you can take a look if you want : ow.ly/NtxpL

[ZazOufUmI]

Though we see the shown event in Firebug... hpics.li/42cc757 But it is never fired

[KyleMit]

@StéphaneJ., here's an example of the exact code I provided working on your exact page. In general, please try to avoid representing issues on your own custom test pages. Instead, try to abstract your problem down into small sections of reproducible code instead of providing a link to your own web page with tons of code. See also: Something in my web site or project doesn't work. Can I just paste a link to it?.

[ZazOufUmI]

thank you for you quality answer. The problem is that I know this is supposed to work, but not in my code. Anyway, your example helped me, I will try to understand the differences between the raw template and mine.

[ZazOufUmI]

I don't know if it can be the problem but I'm using Rails

[Oscar Chambers]

This worked for me, but I'm not sure why... Can you please explain what this does?