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

}
"boxin" : function(data, modal) {...},
"boxout" : function(event) {...}
$("li>a").live("click", function(event){...});
$(".admin").live("click", function(event){...});
// Make the cancel button on editing forms behave like the
// close button and fade out modal windows and overlays
$(".edit-form a:contains(cancel)").live("click", function(event){
fx.boxout(event);
});
});
CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY
Save the file, reload http://localhost/, and click the Add a New Event button. After the modal
window has loaded, click the Cancel link in the form. The modal window and overlay will fade out, just
as they do when the Close button is clicked.
Saving New Events in the Database
To make the form work properly, you must now add a click event handler to the Submit button on the
form. This handler will prevent the default form submission, then use .serialize() to create a query
string from the form inputs. It then uses the serialized data to submit the form via POST to ajax.inc.php.
Start by adding a new click handler to any inputs of type submit that exist in a form with the editform
class. Using .live() ensures that dynamically created inputs will still be targeted by the handler.
You can prevent the default action using event.preventDefault().
Do this by inserting the bold code into init.js:
jQuery(function($){
var processFile = "assets/inc/ajax.inc.php",
fx = {
"initModal" : function() {...},
"boxin" : function(data, modal) {...},
"boxout" : function(event) {...}
}
$("li>a").live("click", function(event){...});
$(".admin").live("click", function(event){...});
// Edits events without reloading
$(".edit-form input[type=submit]").live("click", function(event){
// Prevents the default form action from executing
event.preventDefault();
// Logs a message to indicate the script is working
269