How to Submit an Embedded Form in jQuery Dialog using AJAX

Today I searched for a solution to submit a form embedded into a jQuery dialog with ajax.

My situation is the following: I use a jQuery UI Dialog to display a feedback-form in my web application. The feedback form should not change the state of the page the user worked before.

So my first approach was to change my form post action into a ajax post action. This can be done easily during the initialisation of the dialog. See the following code snippet:

/**
 * Method to initialize the feedback dalog.
 * @see contact_dialog.xhtml
 */
function initContactDialog() {
    // set default settings for profile dialog
    $("#dialog-contact").dialog({
        resizable : false,
        height : 530,
        width : 550,
        modal : true,
        autoOpen : false
    });


    // hide contact dialog per default
    $("#dialog-contact").hide();
        
    // the following method modifies the submit request into a ajax request
    // So the dialog will be closed after the submit was successfull without
    // affects to the main page.
    $('#dialog-contact-form').submit(function() {
        
        // show up waiting panel
        $(".ajax-wait-panel").addClass("ajax-waiting"); 
   
        $.ajax({
               type: "POST",
               url: "http://localhost:8080/myrestservice",
               data: $("#dialog-contact-form").serialize(), // serializes the form's elements.
               success: function(data)
               {
                   $(".ajax-wait-panel").removeClass("ajax-waiting"); 
                   $("#dialog-contact").dialog("close");
               },
               error: function(data)
               {
                   alert('An error occured. Could not send data!'); // show response from post.
                   $(".ajax-wait-panel").removeClass("ajax-waiting"); 
               }
             });

        return false; // avoid to execute the actual submit of the form.
    });
    
}

With the initContactDialog() method I initialize the dialog and bind a function to the submit event of my form. The function changes the submit into a ajax call and closes the dialog after the ajax request was finished.

This is quite easy and the dialog will automatically close when the Ajax submit was finished.

Here is the html part of my dialog form:

    <!-- Dialog Box -->
        <div id="dialog-contact"  title="#{global.contact_title}">
            <form id="dialog-contact-form" method="post" name="contact_form">

                <h:panelGrid columns="2">

                    <h:panelGroup>
                        <dl>
                            <dt>#{global.contact_firstname}:</dt>
                            <dd>
                                <input type="text" name="txtfirstname" value="" />
                            </dd>
                        </dl>
                    </h:panelGroup>
                    <h:panelGroup>
                        <dl style="">
                            <dt>#{global.contact_lastname}:</dt>
                            <dd>
                                <input type="text" name="txtlastname" value="" />
                            </dd>
                        </dl>
                    </h:panelGroup>
                    <h:panelGroup>
                        <dl style="">
                            <dt>#{global.contact_email}:</dt>
                            <dd>
                                <input type="text" name="txtemail" value="" />
                            </dd>
                        </dl>
                    </h:panelGroup>
                </h:panelGrid>
                <dl style="margin: 0 0 0 0px;">
                    <dt>#{global.contact_message}:</dt>
                    <dd>
                        <textarea style="width: 450px; height: 80px;" name="_description" />
                    </dd>
                </dl>
                <input type="submit" value="send" />

            </form>
            <div>
                <h2>#{global.please_wait}</h2>
            </div>
        </div>

I open the dialog with the following JavaScript function:

 /**
 * helper method to open the contact dialog. 
 * The method creates a new empty contact workitem.
 */
function openContact() {    
   $("#dialog-contact").show();
   $("#dialog-contact").dialog("open");
}

AJAX ‘WAIT-PANEL’

As you can see in my script and in the html snippet I have added a div section with the class ‘ajax-wait-panel’. This div overlays the form of my dialog when the ajax call is started. So the user will see a ‘Please wait’ message until the ajax request is finished. I simply add the class ‘ajax-waiting’ to the div section in the moment the request starts and remove the class when the submit was finished. So this is the css part of my solution:

/* Ajax-wait-panel can be useded in jquery dialogs
   for long runnign ajax request.
   Start by setting display:none to make this hidden.
   Background we set to 80% white with
   our animation centered, and no-repeating */
 .ajax-wait-panel {
    display:    none;
    position:   absolute;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .6 ) 
                url('ajax-loader.gif') 
                50% 50% 
                no-repeat;
    cursor: wait;
}

.ajax-wait-panel  h2 {
    position: absolute;
    top: 50%;
    margin-top: -80px;
    color: #666;
    text-align: center;
    width: 100%;
}
/* Class to be added when ajax wait panel should 
   be displayed */
.ajax-waiting {
     display: block;
}