jQuery in Action
The Form Plugin
279
Despite the number of options, calls to
ajaxSubmit()
are frequently quite simple.
If all we need to do is submit the form to the server (and don't have anything to
do when it completes), the call is as Spartan as
do when it completes), the call is as Spartan as
$('#targetForm').ajaxSubmit();
If we want to load the response into a target element or elements:
$('#targetForm').ajaxSubmit( { target: '.target' } );
If we want to handle the response on our own in a callback:
$('#targetForm').ajaxSubmit(function(response){
/* do something with the response */
});
And so on. Because there are sensible defaults for all options, we only need to
specify as much information as needed to tune the submission to our desires.
specify as much information as needed to tune the submission to our desires.
WARNING
Because the
options
hash is passed to the
beforeSubmit
callback, you
might be tempted to modify it. Tread carefully! It's obviously too late to
change the
change the
beforeSubmit
callback because it's already executing, but
you can add or change other simple settings like
resetForm
or
clear-
Form
. Be careful with any other changes; they could cause the operation
to go awry. Please note that you can't add or change the
semantic
prop-
erty because its work is already over by the time the
beforeSubmit
call-
back is invoked.
If you were wondering if a lab page had been set up for this command, wonder no
more! Bring up the page chapter9/form/lab.ajaxSubmit.html in your browser,
and you'll see the display in figure 9.3.
more! Bring up the page chapter9/form/lab.ajaxSubmit.html in your browser,
and you'll see the display in figure 9.3.
NOTE
Note that, because we're going to be submitting requests to the server,
you must run this page under an active web server as described for the
examples of chapter 8 in section 8.2.
you must run this page under an active web server as described for the
examples of chapter 8 in section 8.2.
This lab presents a now-familiar form that we can operate upon with the
ajax-
Submit()
command. The topmost pane contains the form itself; the middle pane
contains a control panel that allows us to add the
resetForm
or
clearForm
options to
the call; and a results pane will display three important bits of information when
the command is invoked--the parameter data that was submitted to the request,
the options hash that was passed to the command, and the response body.
the command is invoked--the parameter data that was submitted to the request,
the options hash that was passed to the command, and the response body.
If you care to inspect the code of the lab, you'll note that the first two items
of information are displayed by a
beforeSubmit
callback, and the third by a