Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY
event_title=Test+Event&event_start=2010-01-04+08%3A00%3A00&event_end=2010-01-04+10%3A00
%3A00&event_description=This+is+a+test+description.&event_id=&token=a52412c2e7bfb993844
0dc9d4e0867370e350134&action=event_edit
Submitting the Serialized Form Data to the Processing File
Now that the form data is serialized, you’re ready use $.ajax() to send the data to the processing file.
Use the POST method to submit the serialized data to ajax.inc.php, and then fade out the modal
window and overlay using fx.boxout() on a successful submission. Also, log a confirmation message in
the Firebug console and append the following bold code to init.js:
// Edits events without reloading
$(".edit-form input[type=submit]").live("click", function(event){
});
// Prevents the default form action from executing
event.preventDefault();
// Serializes the form data for use with $.ajax()
var formData = $(this).parents("form").serialize();
// Sends the data to the processing file
$.ajax({
type: "POST",
url: processFile,
data: formData,
success: function(data) {
// Fades out the modal window
fx.boxout();
// Logs a message to the console
console.log( "Event saved!" );
},
error: function(msg) {
alert(msg);
}
});
At this point, the script is ready to save new events. First, however, you need to modify ajax.inc.php
to accept this data.
Modifying the AJAX Processing File to Handle New Submissions
Getting ajax.inc.php ready to accept submissions from the event editing form is as easy as adding a new
element to the lookup array:
271