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，并直接替换所有内容。你也应该检查一下。最后，{{1}}的结果 win ，因为响应是异步处理的，也就是说，在所有代码执行完毕后。

Answer 2

在;return false;之后的链接/图标getStatus()上添加onclick=

<a href="#getStatus" onclick="getStatus();return false;" data-toggle="tab">

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

2 个答案: