Question

我有一个部分视图，可以创建以下html：

<div id="tabs-3" style="display: block;">
    <div id="My_List">
    </div>
    <button id="create-log"  role="button"> Create new Comment </button>
  <div id="dialog-log">
      <input type="hidden" value="6265" id="My_ID"/>
      <div><label>Title</label><input id="My_Title" type="text" value=""/></div>
      <div><label>Message</label><textarea id="My_Message">...</textarea></div>
   </div> 
</div>

部分视图还会在html下面呈现以下脚本块。

<script>

$(function () {

    $("#dialog-log").dialog({
        autoOpen: false, modal: true, height: "auto", width: "auto", title: "Add Comments to the Log",
        position: { my: "center top", at: "center top", of: window },
        buttons: {

            "Create Comment": function () { UTIL.CreateComment($("#My_ID").val(), $('#My_Title').val(), $('#My_Message').val(), $(this)); },
            Cancel: function () { $(this).dialog("close"); }
        }
    });
    $("#create-log").button().click(function () {
        $("#dialog-log").dialog("open");
    });


});

</script>

布局视图包含一个Utility.js文件。它声明了一个脚本文字，便于在对话框的“创建评论”点击事件中调用ajax。

var UTIL = {

HandleAjaxError : function (jqxhr, textStatus, errorThrown, fn) {
    switch (textStatus) {
        case "timeout": alert(fn + "\n\nStatus:server timeout"); break;
        case "error": alert(fn + "\n\nStatus:general error \nError Thrown:" + errorThrown); alert("object status: " + jqxhr.status + "\nresponse text \n>>>\n" + jqxhr.responseText + "\n<<<\n"); break;
        case "abort": alert(fn + "\n\nStatus:abort"); break;
        case "parsererror": alert(fn + "\n\nStatus:parsererror \nError Thrown:" + errorThrown); alert(jqxhr.responseText); break;
    }
    //alert(jqxhr.responseText);

},
CreateComment: function ($Id, $Title, $Message, $dlg) {

    var mydata = "ID=" + $Id + "&Title=" + $Title + "&Message=" + $Message;

    var jqxhr = $.ajax({ url: "/Log/Create/", type: "POST", dataType: "html", data: mydata

    }).done(
    function (returnhtml) {
        $('#My_List').html(returnhtml);
        $('#My_Title, #My_Message').val("");
        $dlg.dialog("close");

    }).fail(function (jqxhr, textStatus, errorThrown) { UTIL.HandleAjaxError(jqxhr, textStatus, errorThrown); })

}
}

所以在浏览器中发生的事情有时 - 由于我无法解释的原因 - 当用户单击对话框创建的“创建注释”按钮时会触发多个ajax调用。这种情况随机发生，但经常......足以让我担心。

更重要的是，ajax调用的重复次数各不相同 - 有时为3-5次，有时为11-15次......

我的问题与技术有关，因为我不能以任何方式复制行为，尽管它在生产环境中定期发生。

我需要10的声望才能发布截图...

Answer 1

正如Kevin B所指出的，问题可能只是人们一直按下按钮。

按下按钮时应包含“发送”选项，然后将其禁用。

这可以通过多种方式实现，但最简单的方法是设置标志：

CreateComment: function ($Id, $Title, $Message, $dlg) {
  // avoid multi-sending
  if($dlg.data().sending)
     return;
  $dlg.data().sending = true;

  var jqxhr = $.ajax({ url: "/Log/Create/", type: "POST", dataType: "html", data: mydata

   }).done(
    function (returnhtml) {
        // reset sending flag so in when opening the dialog again, another comment can be sent
        $dlg.data().sending = false;
        $('#My_List').html(returnhtml);
        $('#My_Title, #My_Message').val("");
        $dlg.dialog("close");

    }).fail(function (jqxhr, textStatus, errorThrown) {
      $dlg.data().sending = false;
...

这样它会检查对话框是否已经在发送数据，并且在数据实际发送之前不会运行（在完成/失败时变量被重置）

这应该处理浏览器错误或多次点击。

什么会导致ajax请求从jQuery对话框按钮多次触发

1 个答案: