jQuery in Action
264
CHAPTER 8
Talk to the server with Ajax
The added callback creates a wrapped set of all
<abbr>
elements and applies the
termifier()
command to them, specifying a server-side resource of
getTerm.jsp
that overrides the command's default.
And that's it.
Because we wisely encapsulated all the heavy lifting in our reusable jQuery
Because we wisely encapsulated all the heavy lifting in our reusable jQuery
command, using it on the page is even easier than pie! And we can as easily use it
on any other page or any other site. Now that's what engineering is all about!
on any other page or any other site. Now that's what engineering is all about!
The only remaining task is to alter the appearance of the text elements so that
users know which are clickable terms. To the
CSS
file, we add the following
CSS
properties for the
<abbr>
tag:
color: aqua;
cursor: pointer;
border-bottom: 1px aqua dotted;
These styles give the terms a link-ish appearance but with the subtle difference of
using a dotted underline. This invites the users to click the terms, yet keeps them
distinct from any true links on the remainder of the page.
using a dotted underline. This invites the users to click the terms, yet keeps them
distinct from any true links on the remainder of the page.
The new page can be found in the file chapter8/bootcloset/boot.closet.3.html.
Because the changes we made to the code of listing 8.6 are minimal (as we dis-
cussed), we'll spare some paper and not include the entire page listing here.
cussed), we'll spare some paper and not include the entire page listing here.
The updated page with our new functionality in action is shown in figure 8.10.
Our new command is useful and powerful, but there's always...
Our new command is useful and powerful, but there's always...
8.5.3 Room for improvement
Our brand-spankin'-new jQuery command is useful as is, but it does have some
minor issues and the potential for some major improvements. To hone your
skills, here's a list of possible changes you could make to this command or to the
Boot Closet page:
minor issues and the potential for some major improvements. To hone your
skills, here's a list of possible changes you could make to this command or to the
Boot Closet page:
The server-side resource is passed the term in a request parameter named
term
. Add an option to the command giving the page author the ability to
specify the name of the query parameter. Our client-side command
shouldn't dictate how the server-side code is written.
shouldn't dictate how the server-side code is written.
Add an option (or options) that allows the page author to control the fade
durations or, perhaps, even to use alternate effects.
durations or, perhaps, even to use alternate effects.
The Termifier flyout stays around until the customer clicks it or until
the page is unloaded. Add a timeout option to the command that auto-
matically makes the flyout go away if it's still displayed after the time-
out has expired.
the page is unloaded. Add a timeout option to the command that auto-
matically makes the flyout go away if it's still displayed after the time-
out has expired.