jQuery in Action
Manipulating element properties and attributes
57
That's all well and good, but what if we're running a Content Management
System or a wiki, where end users will be able to add content, and we can't rely on
them to add the
System or a wiki, where end users will be able to add content, and we can't rely on
them to add the
target="_blank"
to all external links? First, let's try and deter-
mine what we want; we want all links whose
href
attribute begins with http:// to
open in a new window (which we have determined can be done by setting the
target
attribute to
_blank
).
We can use the techniques we've learned in this section to do this concisely,
as follows:
$("a[href^=http://]").attr("target","_blank");
First, we select all links with an
href
attribute starting with
http://
(which indi-
cates that the reference is external). Then, we set its
target
attribute to
_blank
.
Mission accomplished with a single line of jQuery code!
Another excellent use for jQuery's attribute functionality is helping to solve a
long-standing issue with web applications (rich and otherwise): the Dreaded Dou-
ble Submit Problem. This is a common problem in web applications when the
latency of form submissions, sometimes several seconds or longer, gives users an
opportunity to press the submit button multiple times, causing all manner of
grief for the server-side code.
ble Submit Problem. This is a common problem in web applications when the
latency of form submissions, sometimes several seconds or longer, gives users an
opportunity to press the submit button multiple times, causing all manner of
grief for the server-side code.
For our solution, we'll hook into the form's
submit
event and disable the sub-
mit button after its first press. That way, users won't get the opportunity to click
the submit button more than once and will get a visual indication (assuming that
disabled buttons appear so in their browser) that the form is in the process of
being submitted. Don't worry about the details of event handling in the following
example (we'll get more than enough of that coming up in chapter 5), but con-
centrate on the use of the
the submit button more than once and will get a visual indication (assuming that
disabled buttons appear so in their browser) that the form is in the process of
being submitted. Don't worry about the details of event handling in the following
example (we'll get more than enough of that coming up in chapter 5), but con-
centrate on the use of the
attr()
command:
$("form").submit(function() {
$(":submit",this).attr("disabled", "disabled");
});
Within the body of the event handler, we grab all submit buttons that are inside
our form with the
our form with the
:submit
selector and modify the
disabled
attribute to the value
"disabled"
(the official
W3C
-recommended setting for the attribute). Note that
when building the matched set, we provide a context value (the second parame-
ter) of
ter) of
this
. As we'll find out when we dive into event handing in chapter 5, the
this
pointer always refers to the page element to which the event was bound
while operating inside event handlers.