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:

 $("#dialog").dialog({
  buttons : {
    "Confirm" : function() {
      window.location.href = targetUrl;
    },
    "Cancel" : function() {
      $(this).dialog("close");
    }
  }

Isn't there an easier way, more like javascript confirm?

<input type="submit" onclick="return confirm('are you sure?');" />

Why something like return true, return false doesn't work?

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.