CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Orangeman555
Orangeman555

Reputation: 1181

Tab "shown" event not firing - Twitter Bootstrap

When a tab changes, I'm attempting to fire an ajax call. However, I can't even seem to get this basic test to work:

<ul class="nav nav-tabs">
   <li class="">
      <a data-toggle="tab" href="#gqs-uploader" id="gqs-uploader-btn">Upload</a>
   </li>
   <li class="active">
      <a data-toggle="tab" href="#gqs-results" id="gqs-results-btn">Results</a>
   </li>
   <li class="">
      <a data-toggle="tab" href="#gqs-download" id="gqs-download-btn">Download</a>
   </li>
</ul>

And the javascript:

(function ( $ ) {
    "use strict";

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

}(jQuery));

When ANY tab changes, it should send me an alert.

Why is this simple example not working?

The basic example in the docs does not work either. The entire event (even button clicks) seems invisible - I can't seem to catch it any way.

Upvotes: 6

Views: 7574

Answers (3)

juFo
juFo

Reputation: 18567

This is from the bootstrap documentation: http://getbootstrap.com/javascript/#tabs 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

You have 4 events: hide, show, hidden, shown

Upvotes: 1

Subodh Ghulaxe
Subodh Ghulaxe

Reputation: 18651

Try this code, check working FIDDLE

<ul class="nav nav-tabs">
   <li class="">
      <a data-toggle="tab" href="#gqs-uploader" id="gqs-uploader-btn">Upload</a>
   </li>
   <li class="active">
      <a data-toggle="tab" href="#gqs-results" id="gqs-results-btn">Results</a>
   </li>
   <li class="">
      <a data-toggle="tab" href="#gqs-download" id="gqs-download-btn">Download</a>
   </li>
</ul>

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

Upvotes: 2

Chetan Gawai
Chetan Gawai

Reputation: 2401

Try this

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

Upvotes: 20

Related Questions