javascript - 单击可单击图标后重新加载选项卡

Question

我需要一些有关我拥有的两个 ajax 函数的帮助:

getStatus() - 从 API 打印状态表。

disable() - 从状态表中获取记录的键并禁用它。之后，该记录将从状态表中删除。我从状态表中每条记录显示的可单击图标调用此函数。

function getStatus() {
    var ex = document.getElementById('getStatusTable');
    if (  $.fn.DataTable.fnIsDataTable( ex ) ) {
         var oTable = $('#getStatusTable').dataTable()
         oTable.fnClearTable();
         oTable.fnDraw()
         oTable.fnDestroy();
    }

    $.ajax(
        {
            url : '/control/status',
            type: "GET",
            success:function(data, textStatus, jqXHR)
            {
                theRows = extract_status_data(data)
                $("#getStatusTable tbody").html(theRows)

            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert('error')
            }
        });
    }

    function extract_status_data(jsonDataRaw){
        jsonResultSect = jsonDataRaw['result']
        retTable = ""
        retText = "ret text <br/>"
        for( key in jsonResultSect){
            anaMatStat = jsonResultSect[key]

            A = anaMatStat['A']
            B = anaMatStat['B']
            C = anaMatStat['C']
            D = anaMatStat['D']

            retTable += "<tr><td><img id='disable_"+ key+ "' value='Deactive' src='/img/deactive.png' width='20' height='20' key="+key+ " onclick=disable("+ key+") /> </td><td>" + A +  "</td><td>" +B + "</td><td>" + C + "</td><td>" + D"</td></tr>"

        }
        return retTable
    }

  function disable(key){
  $.ajax(  {
            url : '/control/disable?key='+key,
            type: "GET",
            success:function(data, textStatus, jqXHR) {                   
                  $("#getStatusTable").children().remove()
                 getStatus()
                 $("#getStatusTable").html(data)
                 $("#getStatusTable").show()
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert('error')
            }
    });

HTML:

    <div style="margin-top:10px;width:50%">
        <ul id="af_main_tab" class="nav nav-tabs nav-justified" role="tablist"  >
            <li class="active" ><a href="#otherTab" sonclick="alert('not ready')" role="tab" data-toggle="tab" > Other Tab</a></li>
            <li > <a href="#getStatus" onclick="getStatus()" data-toggle="tab" > Status </a></li>
        </ul>
    </div>


   <div class="internal-frame">
        <div  id="main-content-div" style="margin:0px auto;"  >
            <div class="tab-content">
                <div class="tab-pane" id="getStatus">
                    <table id="getStatusTable"  class="table table-condensed table-striped">
                        <div style="margin-top:10px;width:50%">
                            <thead>
                                <th></th>
                                <th>A</th>
                                <th>B</th>
                                <th>C</th> 
                                <th>D</th> 
                            </thead>
                            <tbody>
                            </tbody>
                        </div>
                    </table>
            </div>

                <div class="tab-pane active" id="otherTab">
                </div>  
            </div>
        </div>
    </div>

我想在单击可单击图标后刷新状态表。这些功能在后端均正常工作。但是，在我单击可单击图标后，表格不会重新加载。仅当我手动重新加载时才会发生这种情况。有人可以告诉我我的代码有什么问题以及如何修复它吗？

Answer 1

您的 Javascript 代码有几个小问题。例如，在extract_status_data中retTable += ...该行缺少 +添加 D 时，在其末尾签名。另外，在同一行中，您要添加 onclick="disable(key1)"而不是预期的 onclick="disable('key1')"所以你需要插入一些 '在那里。

除此之外，当有人单击“禁用”时，您将删除该表的所有子项。这包括 tbody然后什么都不会再添加。至少应该是

$("#getStatusTable tbody").children().remove()

之后您调用getStatus ，它填满了表格，并且还直接替换了所有内容。您还应该检查一下。结果来自getStatus最终会获胜，因为响应是异步处理的，也就是说，在执行所有代码之后。