jQuery in Action
284
CHAPTER 9
Prominent, powerful, and practical plugins
This lab looks and works a lot like the ajaxSubmit Laboratory with a few impor-
tant changes:
tant changes:
The Test button has been removed and the Submit me! button has been
added to the form.
added to the form.
The Control Panel allows us to specify whether the
semantic
property is
added to the options.
An input element of
type
image has been added so that we can observe the
difference in behavior that occurs when
semantic
is set to
true
.
This form can be submitted in the following three ways:
Clicking the Submit me! button
Pressing the Enter key while the focus is on a focusable element
Clicking the Input image control (hibiscus blossom)
In any of these cases, you'll see that the page isn't refreshed; the form submission
is rerouted through an Ajax request whose results are shown in the bottom pane
of the page. Once again, play around with the controls on this page to become
familiar with how the
is rerouted through an Ajax request whose results are shown in the bottom pane
of the page. Once again, play around with the controls on this page to become
familiar with how the
ajaxForm()
command operates. When you have it down, we
have one more Form Plugin subject to tackle.
9.1.4 Uploading files
A somewhat hidden, but useful, feature of the Form Plugin is its ability to auto-
matically detect and deal with forms that need to upload files specified by input
elements of
matically detect and deal with forms that need to upload files specified by input
elements of
type
file. Because
XHR
is unable to accommodate such requests, the
ajaxSubmit()
command (and by proxy
ajaxForm()
) reroutes the request to a
dynamically created and hidden
<iframe>
, while setting the content type of the
request correctly as multipart/form-data.
The server code must be written to handle such file upload requests and mul-
tipart forms; but, from the viewpoint of the server, the request looks like any other
multipart request generated by a conventional form submission. And from the
perspective of the page code, this works exactly like a regular
multipart request generated by a conventional form submission. And from the
perspective of the page code, this works exactly like a regular
ajaxSubmit()
.
Bravo!
Now let's set our sights on another useful jQuery plugin.
Now let's set our sights on another useful jQuery plugin.