Как я могу получить диалоговое окно подтверждения с заголовком, которое возвращает истину / ложь при событиях «ОК» и «Отмена»?

Question

Я создал окно подтверждения, которое работает как положено, и возвращает нажатие кнопки true / false. Но это общий 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;
    }
}

Теперь, с этой настройкой, когда я нажимаю кнопку «Удалить», отображается диалоговое окно. Тем не менее, он ничего не делает на «ОК»

Как я могу вернуть истину / ложь отсюда, поэтому я не удаляю запись, когда нажата кнопка «Отмена», и «Удалить», когда нажата кнопка «ОК».

Answer 1

Вы не опубликовали свой полный HTML, поэтому я взял на себя смелость в создании некоторого HTML контента, используя ваши ID, указанные в вашем примере. В следующий раз, пожалуйста, опубликуйте свой полный HTML, чтобы мы могли точно увидеть, чего вы пытаетесь достичь. Кроме того, похоже, что вы используете диалоги jQuery и jQuery UI, даже если вы не указали нам / заявили это.

Ниже приведен пример с тестовой записью с тремя кнопками, которые вы указали в JS. После нажатия кнопки «Удалить» оператор IF проверяет наличие существующих кнопок «Редактировать / обновить», а затем разрешает запуск диалогового окна подтверждения.

Дополнительную документацию по диалогу пользовательского интерфейса см. Здесь: 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>