从客户端发送 HTTP 请求后元素消失？答案

【问题标题】：Element disappear after sending HTTP request from client?从客户端发送 HTTP 请求后元素消失？
【发布时间】：2014-07-09 09:04:12
【问题描述】：

我制作了一个包含几个元素的简单网页。我正在使用 Web 服务 API 并发送 HTTP 请求来执行操作。

问题： 当我点击Transfer 按钮时，div 元素消失了。想弄清楚它表现出这种行为的原因吗？

我希望这个 div 元素在发送 HTTP 请求后稳定在网页上，以便我执行一些其他功能。

代码如下：

MyPage.html

<div id="actions-call-control">
        <table class="table table-striped">
            <tr class="info">
                <td>
                 <input type="button" class="btn btn-mini btn-primary"  value="Transfer" id="button-message-control-transfer" onclick="transferMessage();" />
               </td>
            </tr>
        </table>
</div>

Sample.js

function transferMessage() {
   var callId = $("#field-call-control-callid").val();
   _finesse.transferMessage(callId, _extension, _handler, _handler); //http request
}
function _handler(data) {
    print2Console("RESPONSE", data);
}
function print2Console(type, data) {
    var date = new Date(),
    xml = null;
    consoleArea = $("#console-area");

    if (type === "EVENT") {
        $fromAddress = $(xml).find("fromAddress");

        if ($fromAddress.text() != '') // checking if the notification is a CALL
        {
            $("#actions-message-control").show();
            ANI = $fromAddress.text();
            ...
        }
        else {
            $("#actions-message-control").hide(); // hide call controls after call dropped/ended
        }

finesse.js

this.transferMessage = function (callId, myExtension, handler, errHandler) {
         var method = "PUT",
         url = _webappPath + "/api/Dialog/" + callId,
         xml = "<Dialog><requestedAction>TRANSFER</requestedAction><targetMediaAddress>" + myExtension + "</targetMediaAddress></Dialog>";
         _sendReq(url, method, null, null, handler, errHandler, false, xml);
     };

需要帮助吗？

【问题讨论】：

什么是_finesse.transferMessage(callId, _extension, _handler, _handler); ，这甚至在任何地方都定义/声明/初始化了吗？
很可能有一些删除它的说明。我的第一个猜测可能是在 _finesse.transferMessage 方法中的某个地方...顺便说一句，使用内联 javascript（= onclick 属性）是一种不好的做法
让我编辑我的问题。
另请查看_handler 中可能删除 DOM 节点的代码。
请贴出回调处理程序和errHandler的代码。

标签： jquery html httprequest

【解决方案1】：

虽然，它不能解决“为什么要删除它？”但是有一种方法可以确保元素始终可见。只需将函数transferMessage()改成如下：

function transferMessage() {
   var callId = $("#field-call-control-callid").val();
   _finesse.transferMessage(callId, _extension, _handler, _handler); //http request
   $('#actions-call-control').show(); // to make sure that the element remains visible
}

【讨论】：

【解决方案2】：

问题实际上出在处理程序上。当我们点击Transfer按钮而不是一堆事件调用并且最后一个事件（xml响应）有空$fromAddress.text()时，这就是div被隐藏的原因。所以html没有问题。解决方案是state应该有条件，因为fromAddress是空的，它的<state>是WORK_READY在最后的事件响应。适合我的代码是：

if ($fromAddress.text() != ''){
    $("#actions-message-control").show();
            ANI = $fromAddress.text();
            ...
}
else {
            $state = $(xml).find("state");
            if ($state.text() === "WORK_READY") {
                $("#actions-call-control").show();
            }
            else {
                $("#actions-call-control").hide();
            }
}

【讨论】：