jQuery in Action
Putting it all together
263
proposal adds even more of these document-centric tags whose purpose
is to provide semantics rather than provide layout or visual rendition
directives. Among such tags are
is to provide semantics rather than provide layout or visual rendition
directives. Among such tags are
<section>
,
<article>
, and
<aside>
.
Therefore, the first thing that we need to do is modify the server-side resource
that returns the item details to enclose terms that have glossary definitions in
that returns the item details to enclose terms that have glossary definitions in
<abbr>
tags. Well, as it turns out, the
getDetails.jsp
resource already does that.
But because the browsers don't do anything with the
<abbr>
tag, we might not
have even noticed unless we'd already taken a look inside the
JSP
or
PHP
file. This
resource returns
JSON
data such as the following for an example item:
{
name: 'Chippewa Harness Boot',
sku: '7141922',
height: '13"',
lining: 'leather',
colors: 'Black, Crazy Horse',
price: '$188.00',
features: '<abbr>Full-grain</abbr> leather uppers. Leather
lining. <abbr>Vibram</abbr> sole. <abbr>Goodyear welt</abbr>.'
}
Note how the terms Full-grain, Vibram and Goodyear welt are identified using the
<abbr>
tag.
Now, on to the page itself. Starting with the code of listing 8.6 as a starting
point, let's see what we need to add to the page in order to use The Termifier. We
need to bring the new command into the page, so we add the following statement
to the
need to bring the new command into the page, so we add the following statement
to the
<head>
section (after jQuery itself has loaded):
<script type="text/javascript"
src="jquery.jqia.termifier.js"></script>
We need to apply the
termifier()
command to any
<abbr>
tags added to the page
when item information is loaded, so we add a callback to the
load()
command
that fetched the item information. That callback uses The Termifier to instru-
ment all
ment all
<abbr>
elements. The augmented
load()
command (with changes in
bold) is as follows:
$('#detailsDisplay').load(
'getDetails.jsp',
{ style: styleValue },
function(){
$('abbr').termifier({
lookupResource: 'getTerm.jsp'
});
}
);