title: Using JQuery UI Dialog with Submit button
body: <p>I am trying to use the JQueryUI Dialog so that I can get a nice looking, formatted confirmation dialog in an internal web application. I have an event listener attached to a Submit button which will then get data and display it in the dialog. 
  So far, I can get it in the dialog and it is formatted nicely, but it appears as though the submit operation is propagating through and not waiting on the user to select an option (Confirm or Cancel), i.e. this dialog flashes on the screen, then disappears when the page processes the submit operation.</p>
  
  <p>I am probably missing something small but I am not sure what, can anyone help? Should I add a stopProagation() function somehow? Thanks in advance.</p>
  
  <p>Here is a snippet of what I am doing (I hope the code inserts correctly):</p>
  
  <pre><code>var StripyTables ={
  init: function(){
  
  
      // hook into the Accept and Exit button
      var acctUpdate = $("#finishShipment");
  
      for (var i = 0, ii = acctUpdate.length; i &lt; ii; i++)
      {
         $(acctUpdate).bind("click", StripyTables.finishListener);
      }
  },
  
  finishListener: function(event){
      var id   = document.getElementById('session_id').value;
      var url  = 'http://'+window.location.hostname+'/truck/webServices/verifyCarr.svc.php';
      var args = 'id='+id;
      var retval = StripyTables.doAjax(url, args);
      var len = retval.length;
      if(retval==null || retval==""){
          event.preventDefault();
      }
      else{
          if(len&lt;100){
              event.preventDefault();
              alert(retval);
          }
          else{
              $('#dialog').html(retval);
              var $dialog = $('&lt;div&gt;&lt;/div&gt;')
              .html(retval)
              .dialog({
                  autoOpen: false,
                  width: 700,
                  height: 350,
                  title: 'Final Detail for Route: '+id,
                  buttons: {
                      "Confirm Route": function() {
                          $( this ).dialog( "close" );
                         // with a form with an ID of 'frm_processRoute', will this work?
                          $('#frm_processRoute').submit();
                      },
                      Cancel: function() {
                          $( this ).dialog( "close" );
                          event.preventDefault();
                      }
                  }
              });
              $dialog.dialog('open');
          }
        },
   doAjax: function(url, args){
      var retVal;
      retVal =   $.ajax({  
                      type: "GET",
                      url: url,
                      data: args,
                      async: false
                  }).responseText;
      if(retVal==null || retVal=="")retval=99;
      return retVal;
  }
  }
  }StripyTables.init();
  </code></pre>