title: Jquery modal dialog and form submit
body: <p>I have a form where I need to display a confirm dialog to the user before saving.</p>
  
  <p>I have done this by intercepting the form submit function as follows:</p>
  
  <pre><code>$("#my_form").submit(function(e) {
      if ($("#id").val() &gt; 0) {
          var $dialog = $('&lt;div&gt;&lt;/div&gt;')
              .html('Are you sure?')
              .dialog({
                  autoOpen: false,
                  title: 'Save New Invoice',
                  modal: true,
                  buttons: {
                      "OK": function() {
                          $dialog.dialog('close');
                          $("#my_form").submit();
                      },
                      Cancel: function() {
                          $(this).dialog("close");            
                      }
                  }
              });
          $dialog.dialog('open');
          e.preventDefault();
          return false;
      }       
  });
  </code></pre>
  
  <p>However, the OK button does not function correctly - the dialog does not close and the form is not submitted.</p>
  
  <p>If I change the OK function as follows, then the dialog is closed and the alert is shown.</p>
  
  <pre><code>"OK": function() {
    $dialog.dialog('close');
    alert('form will be submitted');
  },
  </code></pre>
  
  <p>So, I am guessing that this is something to do with the <code>$("#my_form").submit();</code> method.</p>