title: Returning value from confirmation dialog using JQuery UI dialog
body: <p>I am using <a href="http://jqueryui.com/dialog/" rel="nofollow noreferrer">jQuery UI dialog</a> to display a confirmation dialog when a button is clicked. I want to return <code>true</code>, when OK is clicked and <code>false</code> otherwise.</p>
  
  <p>Associating dialog open call in <code>onClick</code> (as given <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/" rel="nofollow noreferrer">here</a>, <code>$dialog.dialog('open');</code>) event does not serve the purpose. So, as a workaround, I followed an approach, which is similar to this: <a href="http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery" rel="nofollow noreferrer">http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery</a>. There are two differences between this approach and mine:</p>
  
  <ol>
  <li>The example uses anchor tag and,</li>
  <li>It does not use jQuery UI dialog.</li>
  </ol>
  
  <p>I have modified the code given in the example link, but it does not work. I wonder what I am doing wrong. Is there any cheaper way to do this?  </p>
  
  <p>Here is the code, all the CSS/JS are referencing to jQuery CDN, so you should be able to copy the code to see the behavior.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
    &lt;head&gt;
      &lt;link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Control Panel&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;form action="http://google.com"&gt;
        &lt;button class="es-button ui-state-default ui-corner-all" name="changeSem" id="id2"&gt;Start Thermonuclear War&lt;/span&gt;
        &lt;/button&gt;
      &lt;/form&gt;
      &lt;div title="Why so serious?" id="id3" style="display:none;"&gt;
        &lt;p&gt;You are about to start a war.
          &lt;p&gt;Click OK to confirm. Click Cancel to cancel this action.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;script type="text/javascript"&gt;
      $('#id2').click(function (event) {
  
        if ($(this).data('propagationStopped')) {
          //alert('true');
          $(this).data('propagationStopped', false);
          return true;
        } else {
  
          event.stopImmediatePropagation();
  
          $('#id3').dialog({
            //autoOpen: false,
            width: 600,
            buttons: {
              "Ok": function () {
                $(this).dialog("close");
                $('#id2').data('propagationStopped', true);
                $('#id2').triggerHandler(event);
              },
              "Cancel": function () {
                $(this).dialog("close");
                return false;
              }
            }
          });
          //alert('false');
          return false;
        }
      });
    &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Clarification: Please note that it's very simple (see the <a href="https://stackoverflow.com/questions/3560872/returning-value-from-confirmation-dialog-using-jquery-ui-dialog/3561141#3561141">solution by bryan.taylor</a>) to do a form submission. What I want to do here is to simulate submission by button click. More like JavaScript's <a href="https://developer.mozilla.org/en-US/docs/DOM/window.confirm" rel="nofollow noreferrer">confirm()</a> method. </p>