How to load tab tab of bootstrap tab with tab click?

Question

I use Bootstrap tab bars on this site:

<!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li> <li role="presentation"><a href="#chartcontainer2" aria-controls="chartcontainer2" role="tab" data-toggle="tab">Chart 2</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="chartcontainer1"> <div id="layeredcolumnchart"></div> </div> <div role="tabpanel" class="tab-pane" id="chartcontainer2"> <div id="piechart"></div> </div> </div> 

What I want to do is load inactive panels in a tab by clicking .

(Now it loads every panel when the page loads.)

Note. Show-hide is not a solution for me, and what I want to show is not an external URL. This is the div (including some JS) from the current page.

Answer 1

If you want to load the contents of a tab on a tab, you must use Ajax for this.

Here is an example.

HTML code

 <ul class="nav nav-tabs tabs-up" id="friends"> <li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li> <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li> <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="contacts"> </div> <div class="tab-pane" id="friends_list"> </div> <div class="tab-pane urlbox span8" id="awaiting_request"> </div> </div> 

Javascript Code

 $('[data-toggle="tabajax"]').click(function(e) { var $this = $(this), loadurl = $this.attr('href'), targ = $this.attr('data-target'); $.get(loadurl, function(data) { $(targ).html(data); }); $this.tab('show'); return false; }); 

Click here to view demo on JSFiddle: -

Answer 2

I think you need to use tabs to (re) load the div inside the contents of the tab.

For instance:

 $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { if (e.target=='#chartcontainer1') { $('#layeredcolumnchart').html('YOUR HTML/JAVASCRIPT/ETC HERE'); // If you need to load jQuery plugins like charts, you need to load // it here each time you display the tab-content // $('#layeyedcolumnchart .somediv').somePlugin(); } }) 

See the Events section at http://getbootstrap.com/javascript/#tabs

Answer 3

I think you are looking for load animation with css and not the actual loading of information.

#chartcontainer1 simply adding the fade in classes to the active tabpanel (your #chartcontainer1 ) and fade to another tabpanel , you activate this effect.

 <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="chartcontainer1"><!-- Notice the "fade in" classes --> <div id="layeredcolumnchart">...</div> </div> <div role="tabpanel" class="tab-pane fade" id="chartcontainer2"> <!-- Notice the face class --> <div id="piechart">...</div> </div> </div> 

My JSFiddle example

Answer 4

So, after doing a little requirements process, I think I can have a solution.

You need to purge the contents when in the tab, and then download the chart app to get the animation.

 <li role="presentation" class="active"><a href="#chartcontainer1" aria-controls="chartcontainer1" role="tab" data-toggle="tab">Chart 1</a></li> $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { if (e.target=='#chartcontainer1') { $('#chartcontainer1').html(''); makeChartOne(); } }) function makeChartOne(){ var chart = AmCharts.makeChart( "#chartcontainer1", { "type": "pie", "theme": "light", "dataProvider": [ { "country": "Lithuania", "litres": 501.9 }, { "country": "Czech Republic", "litres": 301.9 }, { "country": "Ireland", "litres": 201.1 }, { "country": "Germany", "litres": 165.8 }, { "country": "Australia", "litres": 139.9 }, { "country": "Austria", "litres": 128.3 }, { "country": "UK", "litres": 99 }, { "country": "Belgium", "litres": 60 }, { "country": "The Netherlands", "litres": 50 } ], "valueField": "litres", "titleField": "country", "balloon":{ "fixedPosition":true }, "export": { "enabled": true } } ); }