Using JQuery UI Dialog with Submit button

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.

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.

Here is a snippet of what I am doing (I hope the code inserts correctly):

var StripyTables ={
init: function(){


    // hook into the Accept and Exit button
    var acctUpdate = $("#finishShipment");

    for (var i = 0, ii = acctUpdate.length; i < 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<100){
            event.preventDefault();
            alert(retval);
        }
        else{
            $('#dialog').html(retval);
            var $dialog = $('<div></div>')
            .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();
                    }
             开发者_Go百科   }
            });
            $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();

---

It doesn't appear that the form is prevented from being submitted when the dialog is opened. And, you might be able to simplify the finishListener function:

finishListener: function(event){
    event.preventDefault(); //stop form submit here
    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==""){
       //show error message
    }
    else{
        if(len<100){
        //show error message
        alert(retval);
    }
    else{
        $('#dialog').html(retval);
        var $dialog = $('<div></div>')
        .html(retval)
        .dialog({
            autoOpen: false,
            width: 700,
            height: 350,
            title: 'Final Detail for Route: '+id,
            buttons: {
                "Confirm Route": function() {
                    //$(#your-form).submit();
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
        $dialog.dialog('open');
    }
  }