How do I load Bootstrap tab content only when it is active?

Question

I am using Bootstrap tabs to load a widget from a server. What I need is to load the tab content as soon as the user click the tab instead of the initial load of the page. For ex below is the HTML for the page:-

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#tabs-first" role="tab" data-toggle="tab">FX</a></li>
    <li><a href="#tabs-second" role="tab" data-toggle="tab">US Bond Futures</a></li>
    <li><a href="#tabs-third" role="tab" data-toggle="tab">US Short Term IR futures</a></li>
    <li><a href="#tabs-fourth" role="tab" data-toggle="tab">Global Equity Indices</a></li>
    <li><a href="#tabs-fifth" role="tab" data-toggle="tab">Commodities</a></li>
    <li><a href="#tabs-sixth" role="tab" data-toggle="tab">Volatility</a></li>
</ul>

<!-- Tab Content -->
<div class="tab-content">
    <!-- FX TAB content -->

    <div class="active tab-pane fade in" id="tabs-first">
    </div>
</div>

The first tab is referencing to the #tabs-first id and second tab to the #tabs-second. I want to load #tabs-second only when user clicks on that tab not during the initial load of the page.

Answer 1

What kind of content you want to fetch? Use .load(), as you want to target for #tabs-second only, register click handler to that element like so:

$('[href="#tabs-second"]').click(function(){
  $('#tabs-second').load('remoteUrl');
  // or use callback/complete
  $('#tabs-second').load('remoteUrl', function () {
    // do something here
  });
});