jQueryUI dialog replacement for confirm?

Question

I am trying to override the default confirmation box with the jQueryUI dialog box, and here is my attempt:

window.confirm = function (message_confirm) {
        $(document.createElement('div'))
            .attr({ title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm' })
            .html(message_confirm)
            .dialog({
                buttons: { YES: function () { return true; }, NO: function () { $(this).dialog('close'); } },
                close: function () { $(this).remove(); },
                draggable: true,
                modal: true,
                resizable: false,
                width: 'auto',
                hide: { effect: "fade", duration: 300 },

            });

    };

This works in that once this script is run, calling a regular confirm shows the jQueryUI dialog, however, the YES selection does not work. I have an ajax call like below:

if (confirm("Are you sure you want to delete this user?"))
{
      alert("test");
     //ajax call
}
return false;

And the test alert did not appear. The NO slection of the dialog works fine. How can I get the YES to work?

Thank you.

any errors? tried with console.log instead of alert? does console.log work in the "YES:" function (replace with return true;) ? — ggzone, Aug 02 '16 at 14:16
@ggzone no errors. Replaced `return true` with `console.log("dialog yes clicked")` and it appeared correctly on the console when I clicked Yes. console.log in place of alert did not show up either (same behavior as original alert test). — ITWorker, Aug 02 '16 at 14:21
alright, you want a callback function then. there is already a good answer how to do so — ggzone, Aug 02 '16 at 14:28

score 5 · Answer 1 · answered Aug 02 '16 at 14:23

5

you could add a callback parameter to the function

window.confirm = function (message_confirm, ok_callback)

fire it on YES

 buttons: { YES: function () { ok_callback(); }}

and go on later like

confirm("message", function(){
    alert('smth');
});

answered Aug 02 '16 at 14:23

Sebastian Krysiak

910
6
14

This worked, but the dialog still stayed there after I clicked yes and the action was performed. Thanks for the help. – ITWorker Aug 02 '16 at 14:53

gaetanoM · Accepted Answer · 2016-08-02T15:10:05.980

Because the dialog is asynchronous you can use a deferred approach:

window.confirm = function (message_confirm) {
  var defer = $.Deferred();
  $('<div/>', {title: 'Please confirm', 'class': 'confirm', 'id': 'dialogconfirm', text: message_confirm})
  .dialog({
    buttons: {
      YES: function () {
        defer.resolve("yes");
        $(this).attr('yesno', true);
        $(this).dialog('close');
      }, NO: function () {
        defer.resolve("no");
        $(this).attr('yesno', false);
        $(this).dialog('close');
      }
    },
    close: function () {
      if ($(this).attr('yesno') === undefined) {
          defer.resolve("no");
      }
      $(this).remove();
    },
    draggable: true,
    modal: true,
    resizable: false,
    width: 'auto',
    hide: {effect: "fade", duration: 300}
  });
  return defer.promise();
};

$(function () {
  confirm("Are you sure you want to delete this user?").then(function(yesno) {
    console.log(yesno);
  });
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

This worked and the dialog closed after the actions were performed. I performed the action after checking on `yesno`. Thanks a lot. — ITWorker, Aug 02 '16 at 14:53
@ITWorker Snippet updated: I added $(this).attr('yesno', true); or false and I test this before to close the dialog. In this way, if you close the dialog with ESC or X in any case a resolve deferred action will be taken and the then section will be executed. — gaetanoM, Aug 02 '16 at 15:12

score 1 · Answer 3 · edited Aug 02 '16 at 15:10

1

Try something like below. It worked for me.

 <script>
  $( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete user": function() {
          alert("test");
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );
  </script>
</head>
<body>

<div id="dialog-confirm" title="Please confirm">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>

edited Aug 02 '16 at 15:10

Mosh Feu

28,354
16
88
135

answered Aug 02 '16 at 14:31

spm

190
9

I did not try this but thanks for replying. I tried to have it so that confirm could be replaced throughout the app, and that would allow me to use different behaviors for Yes rather than defining it in a dialog each time. – ITWorker Aug 02 '16 at 14:56

jQueryUI dialog replacement for confirm?

3 Answers3

Linked