Using JQuery UI Dialog with Submit button

Question

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();
                    }
                }
            });
            $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();

jk. · Accepted Answer · 2011-09-20 17:05:33Z

1

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');
    }
  }

answered Sep 20, 2011 at 17:05

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

radi8 Over a year ago

Thank you for the quick reply, but I was under the assumption that this jqueryui confirmation dialog should work the same way as the javascript confirmation. I must be mistaken then. Ok, so if I add the event.preventDefault(); at the top, and the user confirms the form data on the dialog, I still need to have this allow the submit functionality to work (standard submit propagation flow)

jk. Over a year ago

@radi8 Correct regarding the submit except instead of allowing you have to call submit. That is in the answer. And, the jquery dialog is not like the confirmation dialog in that it does not have any built in return data (true/false). You have to program that yourself.

radi8 Over a year ago

Outstanding, and I can do that! I was wondering if this was the case or if I was missing something. I will add that functionality in and then we will be good to go!

Collectives™ on Stack Overflow

Using JQuery UI Dialog with Submit button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related