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

240
CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY
Creating a Modal Window for Event Data
The modal window you’ll create for this app will be fairly simple; the script to create it will follow these
steps:
1. Prevent the default action (opening the detailed event view in view.php).
2. Add an active class to the event link in the calendar.
3. Extract the query string from the event link’s href attribute.
4. Create a button that will close the modal window when clicked.
5. Create the modal window itself and put the Close button inside it.
6. Use AJAX to retrieve the information from the database and display it in the
modal window.
All of the preceding steps will be carried out when the click event is fired for an event title link.
Binding a Function to the Click Event of Title Links
Begin by adding a new selector to init.js that selects all anchor elements that are direct descendants of
list items (li>a) and use the .live() method to bind a handler to the click event. Insert the following
bold code into init.js:
// Makes sure the document is ready before executing scripts
jQuery(function($){
// Pulls up events in a modal window
$("li>a").live("click", function(event){
});
});
// Event handler scripts go here
Preventing the Default Action and Adding an Active Class
Next, you need to prevent the default action by using .preventDefault(), then add an active class to the
clicked element using .addClass().
This is accomplished by adding the following bold code:
// Makes sure the document is ready before executing scripts
jQuery(function($){
// Pulls up events in a modal window
$("li>a").live("click", function(event){
// Stops the link from loading view.php