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>

James van Dyke · Accepted Answer · 2009-12-11 16:43:50Z

1

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

Bind function (e.g., submitForm) to form's submit event, returning false to prevent normal (non-AJAX) form submission.
submitForm function makes $.ajax call.
AJAX call is configured to open the dialog before the the request is sent (event: beforeSend).
Dialog box is populated with "Loading..." text/image.
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.

answered Dec 11, 2009 at 16:43

James van Dyke

5,1403 gold badges31 silver badges25 bronze badges

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

1 Comment

Endophage Over a year ago

Old question I know but fyi you don't need to submit the form, at least not that way. A number of js libraries (Dojo, Extjs) provide methods to "submit" a form via ajax. It's really just a matter of getting all form elements and creating an object with name:value pairs.

topherez · Accepted Answer · 2009-12-11 16:45:17Z

0

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

So, you want to:

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

Look into the jQuery Ajax methods.

answered Dec 11, 2009 at 16:45

topherez

1

Collectives™ on Stack Overflow

jQuery UI Dialog - Ajax in PHP

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related