阿賈克斯加載表裏面Twitter的Bootstrap手風琴摺疊

我想通過ajax加載Twitter內容的Twitter崩潰，內容是在其中包含HTML表的twitter引導標籤的形式，這工作了第一個標籤和第一個可摺疊菜單，我想知道什麼是最好的方式加載標籤裏面的Twitter引導崩潰通過ajax？這裏是一個小提琴 http://jsfiddle.net/H36fG/阿賈克斯加載表裏面Twitter的Bootstrap手風琴摺疊

代碼崩潰佈局 ` 玉米

</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>

與標籤加載的HTML表：

<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>

我使用Twitter的Bootstrap 2.2和JQuery 1.8.3，我很樂意提供如何建議最好我可以提供這樣的數據

來源

2013-01-17 Paul Ngumii

爲你（點擊上載），但把加載GIF在那裏平滑了用戶的經驗，我會保持。例如。你點擊，加載gif出現，一旦ajax調用返回，你隱藏gif並顯示數據。 – JBeagle

我會首先確保只加載一次爲每個協議的內容，然後使用Ajax回調來應用標籤設置等。另外，對於你的標籤命名約定（我看你使用的是<div id="1">），我會建議不要使用數字作爲ID，因爲我已經看到這導致JS/JQ的問題，所以也許用＃tabs-一個，＃標籤二個等

這裏有一個簡單的例子：

$(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); 


       }); 
      } 

    }); 
});

來源

2014-03-28 16:39:51

阿賈克斯加載表裏面Twitter的Bootstrap手風琴摺疊

回答

相關問題