Загрузка содержимого таблеток Bootstrap по клику

Question

В настоящее время у меня есть страница с четырьмя таблетками для таблеток Bootstrap. Содержимое, связанное с каждой из этих вкладок, представляет собой довольно большие таблицы. Из-за этого при загрузке сайта весь контент загружается, делая его очень медленным. Я хотел бы изменить его так, чтобы таблица для каждой вкладки не загружалась, пока пользователь не переключится на эту вкладку. Как я могу это сделать?

---

Ссылки на каждой вкладке следующим образом:

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

Далее, у меня есть четыре 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 используется для создания столы. Содержание вкладки изменяется с 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> 

---

Я пытаюсь

Я думаю, я могу использовать JQuery load(). Я могу заставить основную идею работать с чем-то по строкам 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> 

Другая часть HTML

<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); 
    }); 
}); 

В PHP необходимо создать действие с JSON ответ

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