Question

我有问题。我有一个来自我的数据库的dataTable具有以下结构（我遗漏了像<th>标签那样不需要的信息等等 - dataTable是动态的50到300个条目之一）：

<table>
<tr data-id="34XJ-4">
    <td data-toggle="modal" class="modal-dialog modal-lg sorting_1" data-target="#infoModal" onclick="GetModalDetails()" style="color:darkblue; text-decoration:underline; cursor:pointer;">34XJ-4</td>
    <td>Text34</td>
    <td>11568</td>
    <td>true</td>
</tr>
<tr data-id="34TR-8">
    <td data-toggle="modal" class="modal-dialog modal-lg sorting_1" data-target="#infoModal" onclick="GetModalDetails()" style="color:darkblue; text-decoration:underline; cursor:pointer;">34TR-8</td>
    <td>Text 234234</td>
    <td>11568</td>
    <td>true</td>
</tr>
</table>

我的GetModalDetails JavaScript函数如下所示：

function GetModalDetails() {
        $('tbody tr').click(
            function () {
                var id = $(this).data('id');
                var JSONData = '{\'id\':' + JSON.stringify(id) + '}';
                makeAjaxCall(JSONData, id);
            });

        function makeAjaxCall(JSONData, id) {
            $.ajax({
                url: "/Test.aspx/getDetails",
                data: JSONData,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var result = msg;
                    document.getElementById("ModalBody").innerHTML = result.d;
                    document.getElementById("ModalHead").innerHTML = "Orderdetails " + JSON.stringify(id);
                }
            })
        }
        return false;
    }

最后我有一个Modal，当点击第一列时会弹出详细的视图。

<!-- Modal -->
<div class="modal fade" id="infoModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title" id="ModalHead"></h3>
            </div>
            <div class="modal-body">
                <h5 class="text-center" id="ModalBody"></h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

现在这段代码工作得非常好，直到我第五次关闭模态并点击另一行的第一列而没有刷新页面。

当我查看Chrome的网络调试工具时，我注意到，在我第一次点击时，我的ajax请求获取了正确的ID并将其传递给CodeBehind中的WebMethod。运作良好。但是当我关闭模态并单击表中另一行的另一个第一列时，ajax请求将使用正确的ID执行两次（但问题是并行）。在第三次单击时，将在第4次单击4个请求时执行3个ajax请求，依此类推。（见截图） Screenshot

因此，在Code Behind中给予WebMethod的ID是正确的，但它经常被赋予。所以我在第8次点击，8个类似的请求上做了例子。然后是模态视图中的困难。

为什么会发生这种情况？如何“禁用此隐形”计数器？在我单击模式按钮“关闭”之前，我无法启动另一个Ajax请求。

请帮帮我。

Answer 1

尝试不点击TR的绑定，只需在使用您的功能单击TD时调用您的AJAX服务，例如：

HTML：

    <table>
     <tr>
      <td data-id="34XJ-4" data-toggle="modal" class="modal-dialog modal-lg sorting_1" data-target="#infoModal" onclick="GetModalDetails()" style="color:darkblue; text-decoration:underline; cursor:pointer;">34XJ-4</td>
      <td>Text34</td>
      <td>11568</td>
      <td>true</td>
    </tr>

JAVASCRIPT：

    function GetModalDetails() 
    {
     var id = $(this).data('id');
     var JSONData = '{\'id\':' + JSON.stringify(id) + '}';
     makeAjaxCall(JSONData, id);
    }
    function makeAjaxCall(JSONData, id) {
        $.ajax({
            url: "/Test.aspx/getDetails",
            data: JSONData,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var result = msg;
                document.getElementById("ModalBody").innerHTML = result.d;
                document.getElementById("ModalHead").innerHTML = "Orderdetails " + JSON.stringify(id);
            }
        })
    }
    return false;
}

ASP.Net：Invisible Click Counter，它执行多个Ajax请求

1 个答案: