HTML and CSS Reference
In-Depth Information
FIGURE 16.17
The information
about Uruguay was
loaded from an
external source.
16
First, let's look at the two links:
<p class=”countryOption”><a href=”countries.html #uruguay”>
Uruguay
</a></p>
<p class=”countryOption”><a href=”countries.html #paraguay”>
Paraguay
</a></p>
They almost look like regular links. The one difference is that I've included a space
between the filename and the anchor in the URL. That's because it's not actually an
anchor, it's the ID of a
<div>
on the
countries.html
page.
Here's the event handler for the
click
event for the links:
$(“p.countryOption a”).click(function (event) {
event.preventDefault();
$(“p.countryOption”).fadeOut();
$(“#country”).load($(this).attr('href'));
$(“#country”).fadeIn();
});
You should be used to most of this by now. The first line prevents the link from actually
taking you to the link referenced in the
href
attribute. The second line fades out the
links, because they'll be replaced by the country data.
The third line actually performs the AJAX request. It instructs jQuery to load whatever is
in the
href
of the link the user clicked on into the element with the ID “country.” In this
case, the links refer to jQuery selectors of sorts. Remember the URLs in the links? They
consist of two parts, the first being the file to load, and the second being a jQuery selec-
tor, in this case, the ID of the country that I'll be displaying information about. jQuery
loads the entire page and then applies the selector to it to extract the information I care
about.
