jQuery in Action
Loading content into elements
231
here and in the
JSP
(or
PHP
) page; having the structure defined in two places
would necessitate keeping them in sync. Bad idea!
On page load, we grab the empty version of the content from the server so
that the structure only needs to be defined in one place. Let's look at our ready
handler now.
handler now.
$(function(){
$('#styleDropdown')
.change(function(){
var styleValue = $(this).val();
$('#detailsDisplay').load(
'getDetails.jsp',
{ style: styleValue }
);
})
.change();
});
In this ready handler, we wrap the boot style dropdown and bind a
change
han-
dler
b
to it. In the callback for the change handler, which will be invoked when-
ever a customer changes the selection, we obtain the current value of the selection
by applying the
by applying the
val()
command to
this
, which in the handler is the
<select>
ele-
ment that triggered the event. We then apply the
load()
command
c
to the
detailsDisplay
element to initiate an Ajax callback to a server-side resource,
get-
Details.jsp
, passing the style value as a parameter named
style
.
As the final act of the ready handler, we call the
change()
command
d
to
invoke the change handler. This issues a request with the default style selection of
"" (the empty string), causing the server-side resource to return the construct that
results in the display that was shown in figure 8.2.
"" (the empty string), causing the server-side resource to return the construct that
results in the display that was shown in figure 8.2.
After the customer chooses an available boot style, the page will appear as
shown in figure 8.3.
The most notable operation performed in the ready handler is the use of the
load()
command to quickly and easily fetch a snippet of
HTML
from the server
and place it within the
DOM
as the child of an existing element. This command is
extremely handy and well suited to web applications powered by servers capable
of server-side templating such as
of server-side templating such as
JSP
and
PHP
.
Listing 8.4 shows the complete code for our Boot Closet page, which can be
found in the file chapter8/bootcloset/boot.closet.1.html. We'll be revisiting this
page to add further capabilities to it as we progress through this chapter.
page to add further capabilities to it as we progress through this chapter.
Wraps style dropdown
and binds change handler
and binds change handler
b
Loads data for
selected style
selected style
c
Triggers change
handler
handler
d