CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY // Pulls up events in a modal window $("lia").live("click", function(event){ // Stops the link from loading (); // Adds an "active" class to the link $(this).addClass("active"); // Gets the query string from the link href var data = $(this) .attr("href") .replace(/.+?\?(.*)$/, "$1"), // Checks if the modal window exists and // selects it, or creates a new one modal = (); }); }); Next, set up the call to $.ajax() in the event handler. It will use the POST method, point to the processFile, and send the appropriate data. Because the. | CHAPTER 7 ENHANCING THE USER INTERFACE WITH JQUERY Pulls up events in a modal window li a .live click function event Stops the link from loading Adds an active class to the link this .addClass active Gets the query string from the link href var data this .attr href .replace . . 1 Checks if the modal window exists and selects it or creates a new one modal Next set up the call to .ajax in the event handler. It will use the POST method point to the processFile and send the appropriate data. Because the query string extracted from the link does not include an action field insert one manually here. Finally use .append to insert the returned markup into the modal window if the call succeeds or to display an error message if it fails. Do this by inserting the following bold lines into Pulls up events in a modal window li a .live click function event Stops the link from loading Adds an active class to the link this .addClass active Gets the query string from the link href var data this .attr href .replace . . 1 Checks if the modal window exists and selects it or creates a new one modal Loads the event data from the DB .ajax type POST url processFile 251 CHAPTER 7 ENHANCING THE USER INTERFACE WITH JQUERY data action event_view data success function data Alert event data for now data error function msg msg Save your changes then reload http and click an event title to see the event information loaded into the modal window see Figure 7-2 . Figure 7-2. The event information loaded into the modal window 252 CHAPTER 7 ENHANCING THE USER INTERFACE WITH JQUERY Add a Close Button As it stands right now the only way to get rid of the modal window after clicking an event title is to reload the page. Of course this isn t good enough so you need to add a Close button. To accomplish this you need to create a new link and bind a click event handler to it that
