クリック時にブートストラップピルの内容を読み込む

Question

現在、4つのブートストラップピルタブがあるページがあります。これらの各タブに関連付けられたコンテンツはかなり大きなテーブルです。このため、サイトの読み込み時に、すべてのコンテンツが読み込まれていて、非常に遅くなっています。人がそのタブに切り替えるまで各タブのテーブルが読み込まれないように変更したいと思います。どうすればこれを達成できますか？次のように

---

各タブへのリンクは以下のとおりです。

<ul class="nav nav-pills"> 
    <li class="active"><a href="#active_projects" 
       data-toggle="tab">Active Projects</a></li> 

    <li><a href="#archived_projects" data-toggle="tab">Archived 
        Projects</a></li> 

    <li><a href="#active_families" data-toggle="tab">Active Families</a> </li> 

    <li><a href="#archived_families" data-toggle="tab">Archived Families</a> </li> 
</ul> 

次に、私がコンテンツをロードしている4 divsを持っている：

<div class="tab-content"> 
     <div id="active_projects" class="tab-pane active" 
      style="margin-bottom: 80px;"> 
      <div class="row-fluid"> 
       <table class="table table-hover"> 
        <?php echo $headers; ?> 
        <?php if (isset($this->active)) : ?> 
        <?php echo $this->partialLoop('project/project/projectSummary.phtml', $this->active) ?> 
        <?php endif; ?> 
       </table> 
      </div> 
     </div> 
     <div id="archived_projects" class="tab-pane" 
      style="margin-bottom: 80px;"> 
      <div class="row-fluid"> 
       <table class="table table-hover"> 
        <?php echo $headers; ?> 
        <?php if (isset($this->archived)) : ?> 
        <?php echo $this->partialLoop('project/project/projectSummary.phtml', $this->archived) ?> 
        <?php endif; ?> 
       </table> 
      </div> 
     </div> 
     <div id="active_families" class="tab-pane" 
      style="margin-bottom: 80px;"> 
      <div class="row-fluid"> 
       <table class="table table-hover"> 
        <?php echo $family_headers; ?> 
        <?php if (isset($this->active_families)) : ?> 
        <?php echo $this->partialLoop('projectFamily/projectFamily/familySummary.phtml', $this->active_families) ?> 
        <?php endif; ?> 
       </table> 
      </div> 
     </div> 
     <div id="archived_families" class="tab-pane" 
      style="margin-bottom: 80px;"> 
      <div class="row-fluid"> 
       <table class="table table-hover"> 
        <?php echo $family_headers; ?> 
        <?php if (isset($this->archived_families)) : ?> 
        <?php echo $this->partialLoop('projectFamily/projectFamily/familySummary.phtml', $this->archived_families) ?> 
        <?php endif; ?> 
       </table> 
      </div> 
     </div> 

    </div> 

のZend Frameworkが作成するために使用されますテーブル。タブのコンテンツは、私は、私はjQueryのload()を使用することができると思ってい

をしようとしている何のJavaScript

<script type="text/javascript"> 
    // If a tab is specified by an anchor tag, activate it 
    // See: https://github.com/twbs/bootstrap/issues/2415#issuecomment-4589184 
    $(function() { 
     var activeTab = $('[href=' + location.hash + ']'); 
     activeTab && activeTab.tab('show'); 
    }); 
</script> 

---

で変更されます。私はdocument.getElementById("active_projects").innerHTML = ""の行に沿って何かを扱っている基本的な考え方を得ることができますが、これは文字列を必要とし、コードはあまりうまくありません。何か案は？

Answer 1

タブのデータ読み込みにはAJAXが必要です。たとえば ：

HTML部分

<ul class="nav nav-pills"> 
    <li class="active"> 
     <a href="#" class="active_projects" data-toggle="tab">Active Projects</a> 
    </li> 
    ... 
</ul> 

PHPで

<div id="active_projects" class="tab-pane active" style="margin-bottom: 80px;"> 
    <div class="row-fluid"> 
     <!-- Data from AJAX query will insert here --> 
    </div> 
</div> 

jQueryの部分（http://api.jquery.com/jQuery.ajax/）

$(".active_projects").click(function() { 
    $.ajax({ 
     method: "GET", 
     url: "/controller/action/active_projects" 
    }) 
    .done(function(msg) { 
     alert("Data Saved: " + msg); 
    }); 
}); 

はJSON応答してアクションを作成し必要なHTMLの別の部分

public function loadAction() 
{ 
    $view = JsonModel(); 
    $view->addValues(["table" => "this will table data"]); 
    return $view; 
}