jQuery in Action
230
CHAPTER 8
Talk to the server with Ajax
style is selected will be displayed. When no style is selected, we'll display dashes as
a placeholder for the data.
a placeholder for the data.
Let's start by defining the
HTML
markup that will create this page structure
as follows:
<body id="bootCloset1">
<img id="banner" src="boot.closet.branding.png"/>
<form action="" id="orderForm">
<div id="detailFormContainer">
<h1>Choose your boots</h1>
<div>
<label>Please choose a style:</label><br/>
<select id="styleDropdown">
<option value="">Please choose a boot style</option>
<option value="7177382">Caterpillar Tradesman Work Boot</option>
<option value="7269643">Caterpillar Logger Boot</option>
<option value="7141832">Chippewa 17" Engineer Boot</option>
<option value="7141833">Chippewa 17" Snakeproof Boot</option>
<option value="7173656">Chippewa 11" Engineer Boot</option>
<option value="7141922">Chippewa Harness Boot</option>
<option value="7141730">Danner Foreman Pro Work Boot</option>
<option value="7257914">Danner Grouse GTX Boot</option>
</select>
</div>
<div id="detailsDisplay"></div>
</div>
</form>
</body>
Not much to it, is there?
We've defined all the visual rendition information in an external stylesheet,
and we've included no behavioral aspects in the
HTML
markup in order to
adhere to the precepts of Unobtrusive JavaScript.
The options for the styles dropdown have been pre-populated. In all the
examples in this chapter, we assume that we're using server-side resources to
power our web application; communicating with these resources is, after all, the
whole point of Ajax. So even though the example uses a simple
power our web application; communicating with these resources is, after all, the
whole point of Ajax. So even though the example uses a simple
HTML
file, we
assume that it was originally generated by some server-side templating resources
such as a
such as a
JSP
or
PHP
page and that the product data was dynamically included
from the inventory database (or wherever it's stored).
Also, the
<div>
container defined (with an
id
of
detailsDisplay
) to hold the
details display is completely empty! We're going to rely on the server-side tem-
plating resource to provide the dynamic content, so we don't want to specify it
plating resource to provide the dynamic content, so we don't want to specify it