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

CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 291 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(); CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 292 // 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 CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 293 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", CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 294 // 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){ CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 295 // 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; CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 296 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). CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 297 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", CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 298 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 */ CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 299 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.' CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 300 . 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 . array in ajax.inc .php: < ?php /* * Enable sessions */ session_start(); /* * Include necessary files */ include_once ' / / /sys/config/db-cred.inc .php& apos;; /* . event title will be appended to the calendar (see Figure 8-6 ). CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY 297 Figure 8-6 . After you edit an event, its title is duplicated To. AND JQUERY 296 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 .