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

Now modify the event handler using the following bold code: // Displays the edit form as a modal window $".admin-options form,.admin".live"click", functionevent{ // Prevents the form

var action = "edit_event";

// Loads the editing form and displays it

$.ajax({

type: "POST",

url: processFile,

data: "action="+action,

success: function(data){

// Hides the form

var form = $(data).hide(),

// Make sure the modal window exists

modal = fx.initModal();

// Call the boxin function to create

// the modal overlay and fade it in

fx.boxin(null, modal);

// Load the form into the window,

// fades in the content, and adds

// a class to the form

form

appendTo(modal)

addClass("edit-form")

fadeIn("slow");

},

error: function(msg){

alert(msg);

}

});

});

Determining the Form Action

In the editing controls displayed for individual events, the button names describe the action taken by the

button (e.g., edit_event for the Edit This Event button and delete_event for the Delete This Event

button) These buttons will be used by ajax.inc.php as the action for the submission

Because the event creation button doesn’t have a button name, you need to keep a default value

(edit_event)

To access the name of the clicked button, you’ll use a property of the event object called target

This property contains a reference to the element that triggered the event Use jQuery to select the event

target and use attr() to retrieve its name

Now modify the event handler using the following bold code:

// Displays the edit form as a modal window

$(".admin-options form,.admin").live("click", function(event){

// Prevents the form from submitting

event.preventDefault();

// Sets the action for the form submission

var action = $(event.target).attr("name") || "edit_event";

// Loads the editing form and displays it

$.ajax({

type: "POST",

url: processFile,

data: "action="+action,

success: function(data){

// Hides the form

var form = $(data).hide(),

// Make sure the modal window exists

modal = fx.initModal();

// Call the boxin function to create

// the modal overlay and fade it in

fx.boxin(null, modal);

// Load the form into the window,

// fades in the content, and adds

// a class to the form

form

appendTo(modal)

addClass("edit-form")

fadeIn("slow");

},

error: function(msg){

alert(msg);

}

});

});

Storing the Event ID if One Exists

Next, the event ID needs to be extracted, assuming it’s available To find this value, use the event.target property again, but this time look for the sibling element with the name, event_id, and then store the value of this in a variable called id

You add this to the event handler using the following bold code:

// Displays the edit form as a modal window

$(".admin-options form,.admin").live("click", function(event){

// Prevents the form from submitting

event.preventDefault();

// Sets the action for the form submission

var action = $(event.target).attr("name") || "edit_event",

// Saves the value of the event_id input

id = $(event.target)

siblings("input[name=event_id]")

val();

// Loads the editing form and displays it

$.ajax({

type: "POST",

url: processFile,

data: "action="+action,

success: function(data){

// Hides the form

var form = $(data).hide(),

// Make sure the modal window exists

modal = fx.initModal();

// Call the boxin function to create

// the modal overlay and fade it in

fx.boxin(null, modal);

// Load the form into the window,

// fades in the content, and adds

// a class to the form

form

appendTo(modal)

addClass("edit-form")

fadeIn("slow");

},

error: function(msg){

alert(msg);

}

});

});

Adding the Event ID to the Query String

With the ID stored in the id variable, you can now append the value to the query string for submission to ajax.inc.php

Check whether id is undefined first, and then create an event_id name-value pair Next, attach the

data to the query string using the following bold code:

// Displays the edit form as a modal window

$(".admin-options form,.admin").live("click", function(event){

// Prevents the form from submitting

event.preventDefault();

// Sets the action for the form submission

var action = $(event.target).attr("name") || "edit_event",

// Saves the value of the event_id input

id = $(event.target)

siblings("input[name=event_id]")

val();

// Creates an additional param for the ID if set

id = ( id!=undefined ) ? "&event_id="+id : "";

// Loads the editing form and displays it

$.ajax({

type: "POST",

url: processFile,

data: "action="+action+id,

success: function(data){

// Hides the form

var form = $(data).hide(),

// Make sure the modal window exists

modal = fx.initModal();

// Call the boxin function to create

// the modal overlay and fade it in

fx.boxin(null, modal);

// Load the form into the window,

// fades in the content, and adds

// a class to the form

form

appendTo(modal)

addClass("edit-form")

fadeIn("slow");

},

error: function(msg){

alert(msg);

}

});

});

Remove Event Data from the Modal Window

To replace the content of the modal window with the editing form, you must first remove the event display information

Where you’ve called fx.initModal() in the success handler, select all children that are not the Close button and remove them After removing them, call end() to revert back to the original selection of the

modal window (After calling children, the jQuery object only references the child elements you just removed.)

You can accomplish this by adding the following bold code:

// Displays the edit form as a modal window

$(".admin-options form,.admin").live("click", function(event){

// Prevents the form from submitting

event.preventDefault();

// Sets the action for the form submission

var action = $(event.target).attr("name") || "edit_event",

// Saves the value of the event_id input

id = $(event.target)

siblings("input[name=event_id]")

val();

// Creates an additional param for the ID if set

id = ( id!=undefined ) ? "&event_id="+id : "";

// Loads the editing form and displays it

$.ajax({

type: "POST",

url: processFile,

data: "action="+action+id,

success: function(data){

// Hides the form

var form = $(data).hide(),

// Make sure the modal window exists

modal = fx.initModal()

children(":not(.modal-close-btn)")

remove()

end();

// Call the boxin function to create

// the modal overlay and fade it in

fx.boxin(null, modal);

// Load the form into the window,

// fades in the content, and adds

// a class to the form

form

appendTo(modal)

addClass("edit-form")

fadeIn("slow");

},

error: function(msg){

alert(msg);

}

});

});

After saving this file and reloading http://localhost/ in your browser, click the New Year's Day

event title to bring up the event description Inside the modal window, click the Edit This Event button;

this causes the event description to disappear, and the editing form will fade in with the data for the entry loaded into the form for editing (see Figure 8-5)

Figure 8-5 Editing an event in a modal window

Ensuring Only New Events Are Added to the Calendar

If you make an edit to the New Year’s Day event and save it, an extra event title will be appended to the calendar (see Figure 8-6)

Figure 8-6 After you edit an event, its title is duplicated

To avoid this, you need to add an additional tweak to the form submission click handler Because events being edited will have their ID loaded in the editing form’s hidden input named event_id, you

can check for a length in the input’s value If the length is not zero, don’t call fx.addevent()

Insert the following bold code to make this check:

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

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

}

});

});

With this change in place, your users can now edit events without seeing potentially confusing duplicate titles

Confirming Deletion in a Modal Window

To round out your application, you’re also going to allow users to delete entries without a page refresh A good portion of the script you need to do this is already in place, so adding this functionality will mostly require tweaks to your existing code

Displaying the Confirmation Dialog

To display the confirmation dialog for event deletion when the Delete This Event button is clicked, you

need to add an additional element to the lookup array in ajax.inc.php:

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

)

);

/*

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

}

}

?>

Clicking the Delete This Event button from a modal window at this point now causes the confirmation dialog to appear (see Figure 8-7)

Figure 8-7 The confirmation dialog to delete an event displayed in a modal window