<tr class="RB1"> <td class="pos">RB</td> <td>James Madison</td> <td class="summary"></td> <td class="score">0</td> </tr> <tr class="RB2"> <td class="pos">RB</td> <td>John Jay</td> <td class="summary"></td> <td class="score">0</td> </tr> <tr class="WR1"> <td class="pos">WR</td> <td>John Marshall</td> <td class="summary"></td> <td class="score">0</td> </tr> <tr class="WR2"> <td class="pos">WR</td> <td>Daniel Webster</td> <td class="summary"></td> <td class="score">0</td> </tr> <tr class="TE"> <td class="pos">TE</td> <td>Samuel Chase</td> <td class="summary"></td> <td class="score">0</td> </tr> </tbody> </table> We’ll place two such tables into our page—one for each team. Adding Styles This page is begging for some styling. Create a new file, styles.css, and link to it from game.html: CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 247 <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Game Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js" type="text/javascript"></script> </head> Now you’re free to style this page however you like. Let your inner designer run wild. I’m going to go with something minimal (see Figure 10-21). Figure 10-21. The scoring page with styles applied The technical details aren’t very inter esting; I changed the default font, sized the tables so that they appear side by side, and styled the “ score” table cells to stand out. Bringing in Help Now we’re going to search back through the examples from earlier chapters. We’ll be sal- vaging three files in all. The first two, scores.php and score_broadcaster.js, were created in Chapter 5. The third, totaler.js, was created in Chapter 7. Move all three to the same directory as game.html. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS248 As you may remember, score_broadcaster.js is our beacon in the sky: it talks to our “server” (the scores.php file) and fires a custom event every 30 seconds with the latest player data. Soon we’ll write code to listen for this event and act upon it. The third file will handle the boring job of calculating the totals for each team. The Totaler class we wrote is perfectly suited to summing and resumming each team’s point totals. First, include the two JavaScript files in the document head. Be sure to include them after Prototype and script.aculo.us. <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Game Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script <script src="js/scriptaculous.js" type="text/javascript"></script> <script src="score_broadcaster.js" type="text/javascript"></script> <script src="totaler.js" type="text/javascript"></script> </head> Finally, we’ll write about 20 lines of code in another script block that will handle the logic of updating our player tables. Bells and Whistles Now we’re going to write some page-specific code to wire all this together. It will update the player table with the raw JSON data, highlight those rows that have changed, and finally tell the tables to recompute their totals. Start with the following code in your document head: <script type="text/javascript" charset="utf-8"> document.observe("dom:loaded", function() { var team1totaler = new Totaler('team_1', 'team_1_total', { selector: 'tbody .score' }); var team2totaler = new Totaler('team_2', 'team_2_total', { selector: 'tbody .score' }); }); </script> CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 249 On the dom:loaded event (the custom event that fires as soon as the DOM can be modi- fied) we’re declaring two instances of Totaler—one for each table. The selector option is a CSS selector that identifies all the cells we want to add together. The next step is to write the logic to iterate through the data and update each table. The JSON we receive will be divided up by team, so think of this as taking the data, breaking it in half, and feeding one half to the first table and the other half to the sec- ond. Both sides need the same logic, so let’s write a function that expects one table and one team’s stats. <script type="text/javascript" charset="utf-8"> function updateTeam(table, json) { table = $(table); // a team is divided into several positions var positionStats, row; for (var position in json) { positionStats = json[position]; // match up the JSON property name (WR1, RB2, TE, etc.) with the // table row that has the corresponding class name row = table.down('tr.' + position); // update the score cell with the player's point total from the JSON row.down('td.score').update(positionStats.points); } } document.observe("dom:loaded", function() { var team1totaler = new Totaler('team_1', 'team_1_total', { selector: 'tbody .score' }); var team2totaler = new Totaler('team_2', 'team_2_total', { selector: 'tbody .score' }); }); </script> Remember the score:updated custom event? That’s the indicator that new stats have arrived. So let’s listen for that event: <script type="text/javascript" charset="utf-8"> function updateTeam(table, json) { table = $(table); CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS250 // a team is divided into several positions var positionStats, row; for (var position in json) { positionStats = json[position]; // match up the JSON property name (WR1, RB2, TE, etc.) with the // table row that has the corresponding class name row = table.down('tr.' + position); // update the score cell with the player's point total from the JSON row.down('td.score').update(positionStats.points); } } document.observe("dom:loaded", function() { var team1totaler = new Totaler('team_1', 'team_1_total', { selector: 'tbody .score' }); var team2totaler = new Totaler('team_2', 'team_2_total', { selector: 'tbody .score' }); document.observe("score:updated", function() { // the "memo" property holds the custom data we attached to the event var json = event.memo; // break the JSON in half one piece for each table. updateTeam('table_1', json.team_1); updateTeam('table_2', json.team_2); }); }); </script> Let’s see if this works the way we expect. Open up game.html in your browser. It should look like Figure 10-22. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 251 Figure 10-22. The players’ up-to-date point totals are now shown in the table. You’ll have to wait at least 30 seconds (one interval) to confirm that the scores are updating with each Ajax response—but it should work. There are two problems, though. First, unless you’re looking right at a row, you won’t notice when its point value changes. Second, the totals at the bottom of each table aren’t updating. Let’s take the second problem first. We can fix it easily by using the updateTotal instance method that we wrote when we created Totaler. Once the updateTeam function has set the new data, we’ll tell our Totaler instances to recompute the sums: <script type="text/javascript" charset="utf-8"> function updateTeam(table, json) { table = $(table); // a team is divided into several positions var positionStats, row; for (var position in json) { positionStats = json[position]; // match up the JSON property name (WR1, RB2, TE, etc.) with the // table row that has the corresponding class name row = table.down('tr.' + position); CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS252 . INTRODUCTION TO SCRIPT .ACULO. US EFFECTS248 As you may remember, score_broadcaster.js is our beacon in the sky: it talks to our “server” (the scores.php file) and fires a custom event every 30. include the two JavaScript files in the document head. Be sure to include them after Prototype and script .aculo. us. <head> <meta http-equiv="Content-type" content="text/html;. is begging for some styling. Create a new file, styles.css, and link to it from game.html: CHAPTER 10 ■ INTRODUCTION TO SCRIPT .ACULO. US EFFECTS 247 <head> <meta http-equiv="Content-type"