How can I have a confirmation dialog with title that returns true/false on "OK" and "Cancel" events?

Question

I have created a confirmation box that works as expected and return true/false on the button click. But it is a general confirm where I cannot set a custom title.

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;
    }
}

I call it on a client event. The function returns true or false.

<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()"/>

But, it is just a regular confirmation box.

So, I went ahead and created a div:

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

And then I changes the function to display my div as a dialog:

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;
    }
}

Now, with that set up, when I click the "Remove" button, dialog is displayed. However, it does not do anything on "OK"

How can I return true/false from here, so, I do not delete the record when "Cancel" is pressed and "Delete" when "OK" is pressed.

Answer 1

You didn't post your full HTML, so I took some liberties in creating some HTML content using your ID's provided in your example. Next time, please post your full HTML so we can see exactly what you're trying to achieve. Also, it looks like you are using jQuery and jQuery UI Dialog, even though you didn't specifically show us/state this.

Below is an example with a test record with the 3 buttons you identify in your JS. Upon clicking the Remove button, your IF statement checks for the Edit/Update buttons existing, and then allows the confirmation dialog to trigger.

Please see further documentation of UI Dialog here: 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>