how to use jquery UI dialog as javascript confirm?

Question

I read lots of questions about this, but every solution uses the same workaround, submiting the form inside the jquery dialog, something like this:

 $(\"#dia         


        

Answer 1

This is because jQuery UI dialogs are not technically modal, unlike confirm and alert. They don't pause the javascript you're in the process of executing. But you can get essentially the same thing like this:

function restOfTheCode(returnValue)
{
    //do stuff
}

$("#dialog").dialog({
    buttons : {
        "Confirm" : function() { $(this).dialog("close"); restOfTheCode(true); },
        "Cancel" : function() { $(this).dialog("close"); restOfTheCode(false); }
    }
});

//anything down here executes immediately after the dialog is shown, so that's no good.

Is equivalent to:

var returnValue = confirm("Are you sure you want to confirm?");
//do stuff

Edit: okay, with the addition of the submit issue the alternate code here doesn't make any sense. But the explanation is the same: it's not modal. If you really wanted to, you could simulate this:

function modalDialogConfirm()
{
    var buttonClicked = false;
    var valueSelected;

    $("#dialog").dialog({
        buttons : {
            "Confirm" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = true; },
            "Cancel" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = false; }
        }
    });

    function y { setTimeOut("x()", 100); }
    function x { setTimeOut("y()", 100); }

    while(!buttonClicked);

    return valueSelected;
}

...but this just freezes the browser, so it's not a whole lot of useful...

Answer 2

Here's what you can do, you change your input type from 'submit' to 'button', then, you can have your script like this:

$(document).ready(function(){ 
  $("#dialog").dialog({
    autoOpen: false, 
    buttons : {
        "Confirm" : function() {
          $('#form1').submit();
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });
  $('#submitButton').click(function(){
      $("#dialog").dialog('open');
  });
});

This way your form will only be submitted when the used confirms the dialog.

The reason it doesn't matter if you return false or true in your case is that the dialog is just shown but code from the submit event keeps on executing unless you return false just after showing the dialog.

Answer 3

I wrote the following code to use JQuery's UI Dialog as a modal confirmation. By submitting the form via the event target there is not a recursive call to the submit event handler.

$(function () {
    $('form[action*="/Delete"]').submit(function (e) {
        e.preventDefault();

        $("<div>Are you sure you want to delete this?</div>").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                Ok: function () {
                    e.target.submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
});