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成功方法中运行数组，然后只需填写内容即可。我在手机上，所以我现在无法提供示例，如果仍然需要，我会稍后更新。目前，概念应该有效。

使用jQuery AJAX和PHP

1 个答案: