1

我创建了一个按预期工作的确认框，并在单击按钮时返回真/假。但这是confirm我无法设置自定义标题的一般情况。

function Validate() {

    if ($('#cphBody_gvBins').find("input[value='Edit']").length > 0 || $('#cphBody_gvBins').find("input[value='Update']").length > 0 ) {
        var mConfirm = confirm("The Record contains data that will be deleted. Do you still want to proceed?");
        return mConfirm;
    }
}

我在客户事件中调用它。该函数返回真或假。

<asp:Button ID="btnIssuerRemove" runat="server" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
    CausesValidation="false" CommandName="Remove" Text="Remove" OnCommand="issuerCommand_Click" OnClientClick="return Validate()"/>

但是，它只是一个常规的确认框。

所以，我继续创建了一个 div：

<div id="dialogBox">
    Are you sure?
</div>

然后我更改函数以将我的显示div为对话框：

function CheckForBins() {

    if ($('#cphBody_gvBins').find("input[value='Edit']").length > 0 || $('#cphBody_gvBins').find("input[value='Update']").length > 0) {
        //var mConfirm = confirm("The issuer contains Bins that will be deleted. Do you still want to proceed?");
        $("#dialogBox").dialog({
            title: "System Message",
            modal: true,
            resizable: false,
            width: 250,
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');    
                },
                OK: function(){
                    $(this).dialog('close');
                }
            }
        });

        return false;
    }
}

现在，通过该设置，当我单击“删除”按钮时，将显示对话框。但是，它对“确定”没有任何作用

如何从这里返回真/假，因此，按下“取消”时不删除记录，按下“确定”时不删除记录。

4

1 回答 1

1

您没有发布完整的HTML，所以我冒昧地HTML使用您在示例中提供的 ID 创建了一些内容。下次，请发布您的完整信息HTML，以便我们准确了解您想要实现的目标。此外，看起来您正在使用jQuery和jQuery UIDialog，即使您没有专门向我们展示/说明这一点。

下面是一个带有测试记录的示例，其中包含您在JS. 单击“删除”按钮后，您的IF语句会检查是否存在“编辑/更新”按钮，然后允许触发确认对话框。

请在此处查看 UI Dialog 的更多文档：https ://jqueryui.com/dialog/#modal-confirmation

function Validate(thisRecordRow) {
  if ($('#cphBody_gvBins').find("input[value='Edit']").length > 0 || $('#cphBody_gvBins').find("input[value='Update']").length > 0) {

    var tableRow = $(thisRecordRow).parent('td').parent('tr');

    /*
    Logic without Defer
    */
    CheckForBinsNoDefer(tableRow);

    /* DEFER LOGIC COMMENTEND OUT AS IT WONT WORK FOR YOUR JQUERY VERSION
      CheckForBinsDefer(tableRow).then(function(answer) {
        console.log(answer); // remove me
        return answer;
      });
      */
  }
}

function DoDeleteFunction(tableRow, deleteRow) {
  console.log(deleteRow); // remove me
  if (deleteRow) {
    // do delete logic
    // example:
    $(tableRow).remove();
  } else {
    // do nothing
  }

}

function CheckForBinsNoDefer(tableRow) {
  $("#dialogBox").dialog({
    title: "Delete Record",
    modal: true,
    resizable: false,
    width: 400,
    buttons: {
      "Ok": function() {
        // call DoDeleteFunction with true;
        DoDeleteFunction(tableRow, true);
        $(this).dialog("close");
      },
      "Cancel": function() {
        // call DoDeleteFunction with false;
        DoDeleteFunction(tableRow, false);
        $(this).dialog("close");
      }
    }
  });
}

function CheckForBinsDefer(tableRow) {
  var defer = $.Deferred();
  $("#dialogBox").dialog({
    title: "Delete Record",
    modal: true,
    resizable: false,
    width: 400,
    buttons: {
      "Ok": function() {
        defer.resolve(true);
        $(this).dialog("close");
      },
      "Cancel": function() {
        defer.resolve(false);
        $(this).dialog("close");
      }
    }
  });
  return defer.promise();
}
#dialogBox {
  display: none;
}
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <div id="cphBody_gvBins">
    <div id="dialogBox">
      Are you sure?
    </div>
    <table>
      <tr id="1">
        <td>
          TEST RECORD 1
        </td>
        <td>
          <input type="button" value="Edit" />
        </td>
        <td>
          <input type="button" value="Update" />
        </td>
        <td>
          <input type="button" class="btnIssuerRemove" value="Remove" onclick="Validate(this);" />
        </td>
      </tr>
      <tr id="2">
        <td>
          TEST RECORD 2
        </td>
        <td>
          <input type="button" value="Edit" />
        </td>
        <td>
          <input type="button" value="Update" />
        </td>
        <td>
          <input type="button" class="btnIssuerRemove" value="Remove" onclick="Validate(this);" />
        </td>
      </tr>
      <tr id="3">
        <td>
          TEST RECORD 3
        </td>
        <td>
          <input type="button" value="Edit" />
        </td>
        <td>
          <input type="button" value="Update" />
        </td>
        <td>
          <input type="button" class="btnIssuerRemove" value="Remove" onclick="Validate(this);" />
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

于 2019-04-19T16:48:53.443 回答