Jan. 17, 2011, 6:07 p.m.
posted by propro
Feeling a little rusty on your <div> s and <span> s? We're going to dive into some HTML on the next page, so before we do, here's a quick refresher course on two of the coolest HTML elements you'll ever run across.
A <div> is a container element that can hold related elements, and allow you to style all those elements with one CSS rule.
<div> <div id="menu">Use a <div> to group together elements with a similar purpose. <a href="home.html">home</a> <a href="books.html">writing</a> <a href="links.html">resources</a> <a href="lib.html">library</a> </div>You can refer to a <div>'s id in your CSS to style everything within the <div> at one time.
<span> lets you separate a bit of inline text from its surroundings. You can style your <span> elements using CSS, and set off text easily.
<span> <ul> <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li><span> elements can set off text, but don't start new paragraphs or blocks. <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li><span> elements don't create a new block of text, but can still by styled with CSS. ...
Reviewing the Boards 'R' Us HTML
<html> <head> <title>Boards 'R' Us</title>Katie's read "Head First HTML with CSS & XHTML", so she's all over this stuff... <link rel="stylesheet" type="text/css" href="boards.css" />Katie's using an external CSS stylesheet. </head>You'll need <script> tags here... <body> <h1>Boards 'R' Us Sales Report</h1> <div id="boards"> <table> <tr><th>Snowboards Sold</th> <td><span id="boards-sold">1012</span>Here's the total sales figure you'll need to update... </td></tr> <tr><th>What I Sell 'em For</th> <td>$<span id="price">249.95</span></td></tr> <tr><th>What it Costs Me</th> <td>$<span id="cost">84.22</span></td></tr> </table> <h2>Cash for the Slopes: $<span id="cash">167718.76</span>...and then you can figure out a new net profit, too. </h2> <form method="GET" action="getUpdatedBoardSales.php"> <input value="Show Me the Money" type="submit" />Here's that button Katie pushes for updated totals. Right now, it submits the form, but you're going to change that soon. </form> </div> </body> </html>
Step 1: Creating a request object
If you don't want to type this in yourself, you can find this code in create-request.txt, in the chapter01/boards examples folder...
...but you should really type this code in yourself. It will help your brain get used to writing and thinking about Ajax apps.
Go ahead and add this code into the <head> element of your HTML in boards.html. Don't forget, you'll need to add the <script> and </script> tags, too.
Step 2: Requesting updated sales
Here's what you'll need to do to make getBoardsSold() work:
Katie already has this URL in her form, so this should be simple enough.
Here's where you'll use that request object you created in createRequest().
You can use this number later, in Step 3, when you update the page with new values. You'll tackle this in just a little while.
Adding the getBoardsSold() function
If you did the exercise on the previous page, you should have some code in your boards.html page that looks something like this:
Sending the request to the right URL
So what's next? You've got an object that you can use to request the board sales from the server, but how do you make that request? First, you need to tell the object where to send the requestin other words, it needs to know what program on Katie's server to send the request to. So you need to tell it the URL of the script running on the web server. And where do we get that URL? You can find it in Katie's web form:
And where do we get that URL? You can find it in Katie's web form:
<form method="GET" action="getUpdatedBoardSales.php">Here's the URL of the PHP script we need to make a request to. <input value="Show Me the Money" type="submit" /> </form>Here's the <form> part of Katie's web report HTML.
But doesn't the PHP script return a bunch of HTML right now? I thought we only wanted the number of boards sold for the Ajax version of the app.
This is bonus credit for those of you who are into PHP. If you don't know PHP, it's OK... just take a quick look, and keep going. You don't need to understand this script to learn Ajax or follow the examples in the book.