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

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();
// Adds the event to the calendar
fx.addevent(data, formData);
},
error: function(msg) {
alert(msg);
}
});
CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY
Save this file and reload http://localhost/. Bring up the event creation form and create a new event
with the following information:
• Event Title: Addition Test
• Event Start: 2010-01-09 12:00:00
• Event End: 2010-01-09 14:00:00
• Event Description: This is a test of the dynamic addition of new events to the
calendar.
Submitting the form causes the modal window to fade out; a second later, the new event title will
fade in on the calendar in the proper place (see Figure 8-2).
285