Capturing 'shown' event from bootstrap tab

Question

I have some 'static' HTML on my page:

<div id="DIVISIONS">
    <ul class="nav nav-tabs" id="DIVISIONTABS">
        @* <li> nodes will be injected here by javascript *@
    </ul>
    <div class="tab-content" id="DIVISIONTABPANES">
        @* <div class="tab-pane"> nodes will be injected here by javascript *@
    </div>
</div>

On page load, I create a tab 'framework', ie create the bootstrap tabs and tab content containers.

I trigger the process with:

$(window).bind("load", prepareDivisionTabs);

And "prepareDivisionTabs" does this:

function prepareDivisionTabs() {
    // Retrieve basic data for creating tabs
    $.ajax({
        url: "@Url.Action("GetDivisionDataJson", "League")",
        cache: false
    }).done(function (data) {
        var $tabs = $('#DIVISIONTABS').empty();
        var $panes = $('#DIVISIONTABPANES').empty();
        for (var i = 0; i < data.length; i++) {
            var d = data[i];
            $tabs.append("<li><a href=\"#TABPANE" + d.DivisionId + "\" data-toggle=\"tab\">" + NMWhtmlEncode(d.Name) + "</a></li>");
            $panes.append("<div id=\"TABPANE" + d.DivisionId + "\" class=\"tab-pane\"></div>")
        }
        renderDivisionTabPaneContents(data);
    }).fail(function (err) {
        alert("AJAX error in request: " + JSON.stringify(err, null, 2));
    });
}

For info, the "renderDivisionTabPaneContents" in the above does this:

function renderDivisionTabPaneContents(data) {
    for (var i = 0; i < data.length; i++) {
        var d = data[i];
        renderDivisionTabPaneContent(d.DivisionId);
    }
}

function renderDivisionTabPaneContent(id) {
    var $tabPane = $('#TABPANE' + id);
    $tabPane.addClass("loader")
    $.ajax({
        url: "/League/GetDivisionPartialView?divisionId=" + id,
        cache: false
    }).done(function (html) {
        $tabPane.html(html);
    }).fail(function (err) {
        alert("AJAX error in request: " + JSON.stringify(err, null, 2));
    }).always(function () {
        $tabPane.removeClass("loader")
    });
}

All good so far. My page loads, my tab contents are rendered, and when I click the different tabs, the relevant content is shown.

Now, rather than loading all content at the start, I want to load tab content just-in-time by using the 'shown' event of the tabs. To test this, I've wanted to just make sure I could get a javascript alert when the tab was shown. So, I create the following to trigger the attachment of tab shown events:

$(function () {
    attachTabShownEvents();
})

which calls:

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

I'd therefore expect so see the "TAB CHANGED" alert after the change of tab. But ... I see no alerts.

Could anybody help me out here?

Answer 1

The correct event binding for tab change is shown.bs.tab .

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

Update 11-01-2020 --- Bootstrap 4.5

This is still the correct answer however, this is a bit of additional helpful information found all the way at the bottom of the official bootstrap docs page at: https://getbootstrap.com/docs/4.5/components/navs/#tabs

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

You can determine which tab has been selected each time the code fires with e.target .

If you have unique IDs on your elements then you could do something like the following so code only runs when the appropriate tab is clicked.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  switch (e.target.id){
      case "mainTab":{
           doMainTabStuff();
           break;
      }
      case "configTab":{
           doConfigTabStuff();
           break;
      }
  }
})

Answer 2

<a data-toggle="tab" href="#some_special_tab_anchor">

<div id="some_special_tab_anchor" class="tab-pane fade">
    special tab content
</div>

            $( 'a[data-toggle="tab"]' ).on( 'shown.bs.tab', function( evt ) {

                var anchor = $( evt.target ).attr( 'href' );
                alert("TAB SHOWN = "+anchor);

                // take action based on what tab was shown
               if(anchor === "some_special_tab_anchor"){
                  // do my special thing :)
               }

            });

Answer 3

Use my Nuget package for lazyloading bootstrap tabs here, its very simple, just add "lazyload" class to the "ul" element of bootstrap tabs, then add "data-url" equal to url to load to the any tabs anchor element (a). thats it.

https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/

Answer 4

'show' and 'shown' events didn't work for me. My solution is not exactly specifically OP's situation, but the general concepts are there.

I had the same issue with bootstrap forcing its own onclick events on tabs (menu buttons and content panels). I wanted to lazy load stuff into a panel depending on what menu button was clicked, and some buttons show a panel on the current page, others were to load a page into an iframe.

At first, I stuffed data into a hidden form field tag, which was the same issue. The trick is to detect some sort of change and act on that. I solved the problem by forcing a change and using an alternate event listening on the buttons without having to touch bootstrap.

1) stash iframe target in button as data attribute:

$('#btn_for_iframe').attr('data-url',iframeurl);

2) bind alternate event onto fire off thingy, and inside, swap out the iframe source

$('#btn_for_iframe').on('mouseup',function(){
   console.log(this+' was activated');
   $('#iframe').attr('src',$('#btn_for_iframe').attr('data-url'));
});

3) force 'change' event on panel shows, then load iframe src

$('#iframe_panel_wrapper').show().trigger('change');

or you can put the change trigger in the mouseup above.

Answer 5

$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    $('.nav-tabs a').on('shown.bs.tab', function(event){
        alert('tab shown');
    });
});