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

Configuring the Form Submission Event Handler for Deletion Confirming event deletion requires a little more modification to init.js.. After the modal window fades out, the event title is

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);

}

});

});

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',

'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)

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:

"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

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

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

■ ■ ■

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