jQuery in Action
258
CHAPTER 8
Talk to the server with Ajax
Before we move on to the next chapter, let's put all this grand knowledge to use,
shall we?
shall we?
8.5 Putting it all together
It's time for another comprehensive example. Let's put a little of everything we've
learned so far to work: selectors,
learned so far to work: selectors,
DOM
manipulation, advanced JavaScript, events,
effects, and Ajax. And to top it all off, we'll implement another jQuery command!
For this example, we'll once again return to The Boot Closet page. To review,
look back at figures 8.2, 8.3, 8.5, and 8.6 because we're going to continue to
enhance this page.
enhance this page.
In the detailed information of the boots listed for sale (evident in figure 8.3),
terms are used that our customers may not be familiar with--terms like Goodyear
welt and stitch-down construction. We'd like to make it easy for customers to find out
what these terms mean because an informed customer is usually a happy cus-
tomer. And happy customers buy things!
welt and stitch-down construction. We'd like to make it easy for customers to find out
what these terms mean because an informed customer is usually a happy cus-
tomer. And happy customers buy things!
We could be all 1998 about it and provide a glossary page that customers nav-
igate to for reference, but that would move the focus away from where we want
it--the pages where they can buy our stuff! We could be a little more modern
about it and open a pop-up window to show the glossary or even the definition of
the term in question. But even that's being a tad old-fashioned.
it--the pages where they can buy our stuff! We could be a little more modern
about it and open a pop-up window to show the glossary or even the definition of
the term in question. But even that's being a tad old-fashioned.
If you're thinking ahead, you might be wondering if we could use the
title
attribute of
DOM
elements to display a tooltip (sometimes called a flyout) contain-
ing the definition when customers hover over the term with the mouse cursor.
Good thinking! That allows the definition to be shown in-place without the need
for the customers to have to move their focus elsewhere.
Good thinking! That allows the definition to be shown in-place without the need
for the customers to have to move their focus elsewhere.
But the
title
attribute approach presents some problems for us. First, the fly-
out only appears if the mouse cursor hovers over the element for a few seconds--
and we'd like to be a bit more overt about it, displaying the information immedi-
ately after clicking a term--but, more importantly, some browsers will truncate
the text of a
and we'd like to be a bit more overt about it, displaying the information immedi-
ately after clicking a term--but, more importantly, some browsers will truncate
the text of a
title
flyout to a length far too short for our purposes.
So we'll build our own!
We'll somehow identify terms that have definitions, change their appearance
We'll somehow identify terms that have definitions, change their appearance
to allow the user to easily identify such terms, and instrument them so that a
mouse click will display a flyout containing a description of the term. Subse-
quently clicking the flyout will remove it from the display.
mouse click will display a flyout containing a description of the term. Subse-
quently clicking the flyout will remove it from the display.
Figure 8.9 displays a portion of our page showing the behavior we wish
to add.