jQuery UI Dialog - Ajax in PHP

Question

I have an HTML form in a PHP file like the attached snippet:

When I hit the "Save Details" button, I want the page to load a jQuery UI modal dialog. That dialog will execute a controller action (ex:savedetails) through Ajax. Essentially, the controller action will get all the POST details in "frmEmployees" and saves the changes to a database through Ajax.

I am interested in the logic to load the dialog with the Ajax content in it (Get all the POST variables through the controller action, say "/public/empdetailcontroller" via Ajax). So, far I have something like the HTML below.

Any Ideas?

Snippet:

    <form name="frmEmployees" id="frmEmployees" method="POST" action="">
        <table>
            <tr><td>Name:</td><td><input type="text" name="empName" size="50"></td></tr>
            <tr><td>City:</td><td><input type="text" name="empCity" size="50"></td></tr>
            <tr><td>Country:</td><td><input type="text" name="empCountry" size="50"></td></tr>
            <tr><td colspan=2 align=center><input type="button" name="btnsubmit" value="Save Details"></td></tr>
        </table>
    </form>

    <div id="dialogSaveChanges"
         title="Saving.."
         style="display:none;"><p><span
           class="ui-icon
           ui-icon-info"
           style="float:left; margin:0 7px 20px 0;"
           ></span><span id="dialogText-savechanges"></span></p></div>

    <script language="JavaScript>
        $(document).ready(function() {
            $('#dialogSaveChanges').dialog({
                        autoOpen: false,
                        width: 400,
                        modal: true,
                        title: titleText,
                        closeOnEscape: false,
                        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
                        resizable: false,
                buttons: {
                    Ok: function() {
                        $(this).dialog('close');
                    }
                }
            });
            $('#btnSaveChanges').click(function() {
                $('#dialogSaveChanges').dialog('open');
                $("span#dialogText-savechanges").html("Your Changes have been saved successfully.");
            });
        });
    </script>

Answer 1

Not sure I completely understand what you are trying to do, but let me try...

So, you want to:

1. Send form details to a controller via AJAX.
2. Save the form data to the DB from the controller.
3. On success, show a dialog box with a "Success" message and the saved items.
4. On error (you didn't mention this), I assume you would display an alternate method, correct?

Look into the jQuery Ajax methods.

Answer 2

You'll need to submit the form in order for the form values to be sent. The logic will follow something like this:

1. Bind function (e.g., submitForm) to form's submit event, returning false to prevent normal (non-AJAX) form submission.
2. submitForm function makes $.ajax call.
3. AJAX call is configured to open the dialog before the the request is sent (event: beforeSend).
4. Dialog box is populated with "Loading..." text/image.
5. On success or failure of the ajax call (events: success/failure), the dialog box is populated with the results or an error message.

Code might look like:

$('#frmEmployees').submit( function() {
  $.ajax({
    url: this.attr('action'), // Make sure your form's action URL is correct.
    method: 'POST',
    data: this.serialize(), // this = $('#frmEmployees')
                            // Add hidden form inputs to send any control
                            // parameters to your server script.
    beforeSend: openDialogFunction,
    success: handleFormSuccess,
    failure: handleFormFailure
  });

  return false; // prevent normal form submission.
});

If you program it like this, your page will also work without javascript, it just won't have the dialog box.