JQuery选项卡无法在选定的选项卡上运行

时间:2017-07-04 17:21:42

标签: html ajax asp.net-mvc jquery-ui

我正在尝试根据所选标签填充表格,我正在使用带有ajax的JQuery-UI标签库,问题是只有最后一个函数

  

$('#tabs,#tab-4')。tabs()

正在运行(实际上所有函数都已执行但我只能看到最后一个函数),因此它只会从最后一个选项卡中获取信息。我不确定我是否做得对。

           <ul id="tabs">
                <li><a href="#tab-1">Abiertos</a></li>
                <li><a href="#tab-2">Solucionados</a></li>
                <li><a href="#tab-3">Cerrados</a></li>
                <li><a href="#tab-4">Cancelados</a></li>
            </ul>
            <div class="containerTab" id="tab-1">
                <table class="table table-striped" id="records_table">
                    <thead>
                        <tr>
                            <th class="text-center">Id</th>
                            <th class="text-center">Cliente</th>
                            <th class="text-center">Producto</th>
                            <th class="text-center">Descripción</th>
                            <th class="text-center">Fecha</th>
                            <th class="text-center">Incidente</th>
                            <th class="text-center">Operación</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr></tr>
                    </tbody>
                </table>
            </div>
            <div class="containerTab" id="tab-4">
            <table class="table table-striped" id="records_table4">
                <thead>
                    <tr>
                        <th class="text-center">Id</th>
                        <th class="text-center">Cliente</th>
                        <th class="text-center">Producto</th>
                        <th class="text-center">Descripción</th>
                        <th class="text-center">Fecha</th>
                        <th class="text-center">Incidente</th>
                        <th class="text-center">Cancelado por</th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                </tbody>
            </table>
        </div>

这是我的脚本部分(我删除了tab-2和tab-3,以免延长时间)

$('#tabs, #tab-1').tabs({
            activate: function (event, ui) {
                $("#records_table tbody tr").remove();
                $.ajax({
                    type: "POST",
                    url: "/Servicios/GetIncidentes",
                    contentType: "application/json; charset=utf-8",
                    data: "{'incidente':'Abiertos'}",
                    dataType: "json",
                    success: function (response) {
                        $(function () {
                            $.each(response, function (i, item) {
                                var $tr = $('<tr>').append(
                                    $('<td>').text(item.Id).addClass('text-center'),
                                    $('<td>').text(item.Cliente).addClass('text-center'),
                                    $('<td>').text(item.Producto).addClass('text-center'),
                                    $('<td>').text(item.Descripcion).addClass('text-center'),
                                    $('<td>').text(item.Fecha).addClass('text-center'),
                                    $('<td>').text(item.Incidente).addClass('text-center'),
                                    $('<td>').text('').addClass('text-center').prepend($('<i />', { 'class': 'fa fa-eye' }))
                                ).appendTo('#records_table');
                            });
                        });
                    },
                    error: function (ts) { alert(ts.responseText) }
                })
            }
        });

$('#tabs, #tab-4').tabs({
            activate: function (event, ui) {
                $("#records_table4 tbody tr").remove();
                $.ajax({
                    type: "POST",
                    url: "/Servicios/GetIncidentes",
                    contentType: "application/json; charset=utf-8",
                    data: "{'incidente':'Cancelados'}",
                    dataType: "json",
                    success: function (response) {
                        $(function () {
                            $.each(response, function (i, item) {
                                var $tr = $('<tr>').append(
                                    $('<td>').text(item.Id).addClass('text-center'),
                                    $('<td>').text(item.Cliente).addClass('text-center'),
                                    $('<td>').text(item.Producto).addClass('text-center'),
                                    $('<td>').text(item.Descripcion).addClass('text-center'),
                                    $('<td>').text(item.Fecha).addClass('text-center'),
                                    $('<td>').text(item.Incidente).addClass('text-center'),
                                    $('<td>').text('').addClass('text-center').prepend($('<i />', { 'class': 'fa fa-eye' }))
                                ).appendTo('#records_table4 tbody');
                            });
                        });
                    },
                    error: function (ts) { alert(ts.responseText) }
                })
            }
        });

GetIncidentes方法接收一个字符串(字符串incidente)并返回一个解析的Json列表。

0 个答案:

没有答案