jQuery UI Dialog - Ajax in PHP - 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

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.

Answer 2

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.