Ajax loaded table inside Twitter Bootstrap Accordion Collapse

Question

I'm trying to download content to smooth Twitter via ajax, the content is in the form of twitter bootstrap tabs containing html tables in them, this works for the first tab and the first folding menu, I wonder what is the best way to load tabs inside the Twitter broken trap via ajax? Here is the fiddle http://jsfiddle.net/H36fG/

Code for the layout collapse `Corn

</div> <div id="Maize" class="accordion-body collapse"> <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Maize" class="btn btn-link">See More</a> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" id="2" data-toggle="collapse" data-parent="#accordion" href="#Sorghum"> Sorghum </a> </div> <div id="Sorghum" class="accordion-body collapse"> <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Sorghum" class="btn btn-link">See More</a> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" id="3" data-toggle="collapse" data-parent="#accordion" href="#Wheat"> Wheat </a> </div> <div id="Wheat" class="accordion-body collapse"> <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Wheat" class="btn btn-link">See More</a> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" id="4" data-toggle="collapse" data-parent="#accordion" href="#Rice"> Rice </a> </div> <div id="Rice" class="accordion-body collapse"> <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Rice" class="btn btn-link">See More</a> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" id="5" data-toggle="collapse" data-parent="#accordion" href="#Millet"> Millet </a> </div> <div id="Millet" class="accordion-body collapse"> <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Millet" class="btn btn-link">See More</a> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" id="6" data-toggle="collapse" data-parent="#accordion" href="#Beans"> Beans </a> </div> <div id="Beans" class="accordion-body collapse"> <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Beans" class="btn btn-link">See More</a> </div> </div> 

Loaded tabbed html table:

 <ul class="nav nav-tabs" id="product-table"> <li><a href="#1" data-toggle="tab">Grade 1</a> </li> <li><a href="#2" data-toggle="tab">Grade 2</a> </li> <li><a href="#3" data-toggle="tab">Grade 3</a> </li> </ul> <div class="tab-content"> <div> <div class="tab-pane" id="1"> <table class="table table-condensed table-bordered table-striped volumes"> <thead> <tr> <th>Warehouse</th> <th>Grain Volume</th> <th>Trade Volume</th> <th>Direction</th> </tr> </thead> <tbody> <tr> <td>NFRA MPANDA RUKWA</td> <td>487</td> <td>487.00</td> <td>IN</td> </tr> <tr> <td>COTCORI Cooperative</td> <td>113</td> <td>113.00</td> <td>IN</td> </tr> <tr> <td>ENAS GBC KIREHE</td> <td>131</td> <td>131.00</td> <td>IN</td> </tr> <tr> <td>Government Procurement and Supply Agent</td> <td>453</td> <td>453.00</td> <td>IN</td> </tr> <tr> <td>Nairobi(test)</td> <td>261</td> <td>250.00</td> <td>IN</td> </tr> </tbody> </table> </div> </div> <div> <div class="tab-pane" id="2"> <table class="table table-condensed table-bordered table-striped volumes"> <thead> <tr> <th>Warehouse</th> <th>Grain Volume</th> <th>Trade Volume</th> <th>Direction</th> </tr> </thead> <tbody> <tr> <td>National Food Reserve Agency_Manyoni</td> <td>172</td> <td>172.00</td> <td>IN</td> </tr> <tr> <td>Sodea GBC</td> <td>471</td> <td>20.00</td> <td>OUT</td> </tr> <tr> <td>Kivu Maize Factory</td> <td>389</td> <td>389.00</td> <td>IN</td> </tr> <tr> <td>Mombasa Bulk Grain Handlers</td> <td>200</td> <td>200.00</td> <td>IN</td> </tr> <tr> <td>Zwii Enterprises-Muloza</td> <td>-47</td> <td>47.00</td> <td>OUT</td> </tr> </tbody> </table> </div> </div> <div> <div class="tab-pane" id="3"> <table class="table table-condensed table-bordered table-striped volumes"> <thead> <tr> <th>Warehouse</th> <th>Grain Volume</th> <th>Trade Volume</th> <th>Direction</th> </tr> </thead> <tbody> <tr> <td>COTCORI Cooperative</td> <td>93</td> <td>93.00</td> <td>IN</td> </tr> <tr> <td>SOSOMA GBC KICUKIRO</td> <td>-23</td> <td>23.00</td> <td>OUT</td> </tr> <tr> <td>Shabiby_Indivisual</td> <td>270</td> <td>270.00</td> <td>IN</td> </tr> <tr> <td>Silayo_Union Service Stores</td> <td>-38</td> <td>38.00</td> <td>OUT</td> </tr> <tr> <td>SGR/NFRA VWAWA</td> <td>-39</td> <td>39.00</td> <td>OUT</td> </tr> </tbody> </table> </div> </div> </div> 

I use Twitter Bootstrap 2.2 and JQuery 1.8.3, I am open to suggestions on how best I can present such data

Answer 1

First, I only have to download the content once for each agreement, and then use the Ajax callback to apply the tab settings, etc.

Also, for your tab naming convention (I see that you are using <div id="1"> ), I would recommend not using numbers for IDs, as I have seen that this causes problems with JS / JQ, therefore, maybe go to #tabs -one, # tabs-two, etc.

Here is an example:

 $(document).ready(function() { $('.accordion-toggle').on('click', function () { var parentRef = $(this).attr('href'), $innerContent = $(parentRef).find('.accordion-inner'); //only load group once if($innerContent.text() ===''){ $innerContent.load('http://fiddle.jshell.net/NPpHm/show/', function(){ var $this = $(this), $innerTabs = $this.find('.nav-tabs'); console.log($innerTabs); var tabOpts = { active: 0, cookie: {expires: 3}, show: onTabShow, fillSpace: false, autoHeight: true, collapsible: false }; $innerTabs.tabs(tabOpts).fadeIn(700); }); } }); });