Tương tác giữa PHP và jQuery - part 31 potx

CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY

301
Configuring the Form Submission Event Handler for Deletion
Confirming event deletion requires a little more modification to init.js. To execute properly, the value
of the Submit button needs to be stored and passed to the processing file. This is because the form can
be submitted with either Yes, Delete It or Nope! Just Kidding! as values; the script checks which
button was clicked to determine what action to take.
To store the button’s value, use the this keyword as the jQuery selector, and then store the returned
string from .val() as a variable called submitVal. Next, check whether the button’s name attribute is
confirm_delete. If so, append the action confirm_delete and the value of the button to the query string
before submitting it.
Insert the following code shown in bold to accomplish this:

// 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(),

// Stores the value of the submit button
submitVal = $(this).val();

// If this is the deletion form, appends an action
if ( $(this).attr("name")=="confirm_delete" )
{
// Adds necessary info to the query string
formData += "&action=confirm_delete"

+ "&confirm_delete="+submitVal;
}

// Sends the data to the processing file
$.ajax({
type: "POST",
url: processFile,
data: formData,
success: function(data) {
// Fades out the modal window
fx.boxout();

// If this is a new event, adds it to
// the calendar
if ( $("[name=event_id]").val().length==0 )
{
fx.addevent(data, formData);
}
},
error: function(msg) {
alert(msg);
}
CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY

302
});

});
Modifying the Processing File to Confirm Deletion
Finally, you need to add an additional element to the lookup array in ajax.inc.php to make the Delete

button work:

<?php

/*
* Enable sessions
*/
session_start();

/*
* Include necessary files
*/
include_once ' / / /sys/config/db-cred.inc.php';

/*
* Define constants for config info
*/
foreach ( $C as $name => $val )
{
define($name, $val);
}

/*
* Create a lookup array for form actions
*/
$actions = array(
'event_view' => array(
'object' => 'Calendar',
'method' => 'displayEvent'
),

'edit_event' => array(
'object' => 'Calendar',
'method' => 'displayForm'
),
'event_edit' => array(
'object' => 'Calendar',
'method' => 'processForm'
),
'delete_event' => array(
'object' => 'Calendar',
'method' => 'confirmDelete'
),
'confirm_delete' => array(
CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY

303
'object' => 'Calendar',
'method' => 'confirmDelete'
)
);

/*
* Make sure the anti-CSRF token was passed and that the
* requested action exists in the lookup array
*/
if ( isset($actions[$_POST['action']]) )
{
$use_array = $actions[$_POST['action']];
$obj = new $use_array['object']($dbo);

/*
* Check for an ID and sanitize it if found
*/
if ( isset($_POST['event_id']) )
{
$id = (int) $_POST['event_id'];
}
else { $id = NULL; }

echo $obj->$use_array['method']($id);
}

function __autoload($class_name)
{
$filename = ' / / /sys/class/class.'
. strtolower($class_name) . '.inc.php';
if ( file_exists($filename) )
{
include_once $filename;
}
}

?>

You can test the preceding code by deleting the ID Test event from the calendar. After the modal
window fades out, the event title is still present and clickable; however, if you try to view the event’s
details, its information is unavailable, and it doesn’t make sense (see Figure 8-8).

CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY

304

Figure 8-8. Because the event no longer exists, the event view makes no sense
Remove the Event from the Calendar After Deletion
You want to avoid the confusion caused by having non-existent events on the calendar after a user
deletes them, so you need to add functionality to remove events from the calendar once this occurs.
To do this, you’ll add a new function to the fx object literal called removeevent. This function will use
the active class applied to events when they’re brought up in the modal window to fade them out and
remove them from the DOM. You can add this function to fx using the following bold code:

fx = {
"initModal" : function() { },
"boxin" : function(data, modal) { },
"boxout" : function(event) { },
"addevent" : function(data, formData){ },

// Removes an event from the markup after deletion
CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY

305
"removeevent" : function()
{
// Removes any event with the class "active"
$(".active")
.fadeOut("slow", function(){
$(this).remove();
});
},

"deserialize" : function(str){ },

"urldecode" : function(str) { }
};
Modifying the Form Submission Handler to Remove Deleted Events
To remove events after they are deleted, add a new variable called remove to the form submission event
handler. This will store a boolean value that tells the script whether to remove an event. By default, this
value will be set to false, which means the event should not be removed.
The only condition under which an event should be removed is if the Yes, Delete It button is clicked
from the confirmation dialog. Add a check for this text in the Submit button and set remove to true if a
match is made.
Inside the success handler, set up a conditional that checks whether remove is true and fires
fx.removeevent() if it is.
Finally, to prevent empty elements from being added to the calendar, modify the conditional that
fires fx.addevent() to ensure that remove is false before executing.
You can make these changes by adding the code shown in bold:

// 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(),

// Stores the value of the submit button
submitVal = $(this).val(),

// Determines if the event should be removed
remove = false;

// If this is the deletion form, appends an action
if ( $(this).attr("name")=="confirm_delete" )
{
// Adds necessary info to the query string
formData += "&action=confirm_delete"
+ "&confirm_delete="+submitVal;

// If the event is really being deleted, sets
CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY

306
// a flag to remove it from the markup
if ( submitVal=="Yes, Delete It" )
{
remove = true;
}
}

// Sends the data to the processing file
$.ajax({
type: "POST",
url: processFile,
data: formData,
success: function(data) {
// If this is a deleted event, removes
// it from the markup
if ( remove===true )
{
fx.removeevent();
}

// Fades out the modal window
fx.boxout();

// If this is a new event, adds it to
// the calendar
if ( $("[name=event_id]").val().length==0
&& remove===false )
{
fx.addevent(data, formData);
}
},
error: function(msg) {
alert(msg);
}
});

});

Save these changes, then reload http://localhost/ and pull up the Test Event description. Delete
the event; after you click the Yes, Delete It button, the modal box and event title will fade out, effectively
eliminating the event from the calendar and eliminating any potential confusion for your users (see
Figure 8-9).

CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY

307

Figure 8-9. After deleting "Test Event", the event title is removed from the calendar
Summary

In this chapter, you implemented controls that allow your users to quickly create, edit, and delete events
without being required to refresh the page. This makes the application feel much more streamlined and
user-friendly.
In the next chapter, you’ll learn how to use regular expressions to ensure that the data entered in the
editing forms is valid, ensuring that your app won’t allow data that could potentially break it to be
entered into the database.




P A R T 4
■ ■ ■
Advancing jQuery and PHP

At this point, you've got a functional calendar application. However, there are some
things that you could add to improve the user experience, such as form validation.
This part of the book will also cover advanced techniques such as validating user input
with regular expressions and building custom jQuery plugins.