Load Data into Dynamically created Tabs using jQuery AJAX and PHP - php

Question

My situation is as follows:
PHP script retrieves data from a database. This information is shown in the first tab. This tab will always stand and can not be closed. This is fine, see me code.
try {
print '
<div class="clientTabs">
<ul class="nav nav-tabs" id="navTabs">
<li class="active" id="li0">Alle clienten</li>
</ul>
</div>';
$selectTabbladen = $gebruiker_data->runQuery("SELECT * FROM clients ORDER BY clients_id");
if (!$selectTabbladen->execute()) return false;
if ($selectTabbladen->rowCount() > 0) {
print '
<div class="tab-content" id="tabContent">
<div id="client0" class="tab-pane active">
<div class="bootstrap-table">
<div class="fixed-table-toolbar">
<div class="bars pull-left">
<button id="btnTabdel" class="btn btn-danger btn-labeled" disabled="disabled">Vervijderen</button>
</div>
</div>
</div>
<table class="table table-bordered" id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="false"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-pagination="true"
data-id-field="id"
data-minimum-count-columns="2"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false">
<thead>
<tr>
<th class="text-center" width="1">#</th>
<th>Name</th>
<th>Address</th>
<th>Zip</th>
<th>City</th>
<th>Tel.</th>
</tr>
</thead>
<tbody>';
while($aRow = $selectTabbladen->fetch(PDO::FETCH_ASSOC)) {
$id = $aRow['clients_id'];
$name= $aRow['name'];
$adress= $aRow['address'];
$zip= $aRow['zip'];
$city= $aRow['city'];
$tel= $aRow['tel'];
print '<tr class="tabData" id="'.$id.'">
<td>
<label class="cr-styled">
<input type="checkbox" ng-model="todo" class="tabID" value="'.$id.'"/>
<i class="fa"></i>
</label>
</td>
<td>'.$name.'</td>
<td>'.$address.'</td>
<td>'.$zip.'</td>
<td>'.$city.'</td>
<td>'.$tel.'</td>
</tr>';
}
Double-click creates a dynamic tab that retrieve other data from the database associated with this ID. This is also good, a new TAB is created and the data retrieved.
//Tabs
$('body').on('dblclick', '.tabData', function () {
var tab_id = $(this).attr("id");
addTab(tab_id);
});
function addTab(tab_id) {
// If tab already exist in the list, return
if ($("#li"+tab_id).length != 0) {
$("#navTabs li").removeClass("active");
$("#client0").removeClass("active");
$("#li"+tab_id).addClass("active");
$("#client"+tab_id).addClass('active').show();
//return;
} else {
$("#navTabs li").removeClass("active");
$("#client0").removeClass("active");
// add new tab and related content
$('ul#navTabs li:last-child').after('<li class="active" id="li' + (tab_id) + '">Client ' + (tab_id) + ' <button type="button" class="btn btn-warning btn-xs" onclick="removeTab(' + (tab_id) + ');"><i class="fa fa-remove"></i></button>');
loadClientData(tab_id);
//$('div#tabContent div:last-child').after('<div class="tab-pane" id="client' + (tab_id) + '"><p>Content tab ' + (tab_id) + '</p></div>');
// set the newly added tab as current
$("#client"+tab_id).addClass('active').show();
}
}
function loadClientData(tab_id) {
$("#tabContent").empty();
$.ajax({
type: "GET",
url: "clienten_data_load.php?id='+tab_id",
success: function(data) {
//empty(data);
$("#tabContent").text(data);
}
});
}
});
From here it goes wrong and I do not know how to solve this.
If I go back to the first TAB after first created dynamic tab, then this contains same data as the dynamically created tab.
What am I trying to do:
First tab: Provides an overview of all clients with a number of client data.
Dynamic tabs: There will be a maximum of 10 tabs. Each double click creates a dynamic tab to maximum of 10. The contents of the tab have to be all other client data associated with the corresponding ID.
How can I make sure that an additional tab is created with each double click without replacing the contents of other tabs?
Hope I explained it clearly.

Answer 1

Your PHP should be returning an array (JSON) of rows with sub-arrays as the row content, NOT HTML. So build your return as an array then return using json_encode. Next you'd need to run through the array in your AJAX success method and simply fill in the content. I am on my phone, so I cannot provide an example as of right now, I will update this later if it is still needed. For now, concept should work.