使用jQuery AJAX和PHP将数据加载到动态创建的标签中

Question

我的情况如下：

PHP脚本从数据库检索数据。 此信息显示在第一个选项卡中。 此选项卡将始终站立且无法关闭。 很好，请参阅代码。

try {

print '
    <div class="clientTabs">
        <ul class="nav nav-tabs" id="navTabs">
            <li class="active" id="li0"><a href="#client0" role="tab" data-toggle="tab">Alle clienten</a></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>';
                }

双击创建一个动态选项卡，该选项卡从与此ID关联的数据库中检索其他数据。 这也很好，将创建一个新的TAB并检索数据。

    //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) + '"><a href="#client' + (tab_id) + '" role="tab" data-toggle="tab">Client ' + (tab_id) + ' <button type="button" class="btn btn-warning btn-xs" onclick="removeTab(' + (tab_id) + ');"><i class="fa fa-remove"></i></button></a>');

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

        }
    });
}

}）;

从这里开始出错了，我不知道如何解决。

如果我在首次创建动态标签后返回第一个TAB，则它包含与动态创建的标签相同的数据。

我要做什么：

第一个选项卡：提供所有客户端的概述以及许多客户端数据。

动态标签：最多有10个标签。 每次双击都会创建一个动态选项卡，最多10个。选项卡的内容必须是与相应ID关联的所有其他客户端数据。

如何确保每次双击都会创建一个附加选项卡，而不替换其他选项卡的内容？

希望我能解释清楚。

Answer 1

您的PHP应该返回包含子数组的行数组（JSON）作为行内容，而不是HTML。 因此，将返回值构建为数组，然后使用json_encode返回。 接下来，您需要使用AJAX成功方法遍历数组，然后简单地填写内容。 我正在使用手机，因此目前无法提供示例，如果需要，我将在稍后进行更新。 目前，概念应该起作用。