- jQuery-Specific Selectors 8:22
- Working with jQuery-Specific Selectors 1 objective
- Changing Element Properties 4:46
- Changing Element Styles and Classes 3:20
- Adding/Removing Classes 2 objectives
- Stopping the Browser's Default Behavior 8:11
- Looping through a jQuery collection 6:15
- The .each() method 1 objective
- Conclusion 3:19
- Working with jQuery Collections Review 5 questions
Preview
Video Player
00:00
00:00
Stopping the Browser's Default Behavior
8:11Prevent the browser from following links on click with the preventDefault() method.
Now that you've got a few
more methods under your belt,
0:00
let's start working on this
project's main functionality.
0:02
To be permitted to download a copy of
the jQuery Cheatsheet from our website,
0:05
the user first has to check the box
confirming that they want to Allow PDF
0:10
downloads.
0:14
If the box isn't checked and
they attempt to download it,
0:16
we'll display a message advising them that
they should check the box to confirm.
0:19
Right now our default behavior
is to download the PDF on click.
0:24
How can we conditionally
prevent this behavior?
0:29
To prevent an event from triggering
the browser's default behavior,
0:31
you call the preventDefault method.
0:35
Go ahead and open the workspace with
this video, and let's get to it.
0:37
To the PDF links,
let’s add a click handler.
0:41
I’m gonna use the on method here.
0:57
You can use the click shorthand
method if you'd like.
0:58
But I prefer to use the on
method most of the time
1:01
because as we discussed in a previous
video, it's more flexible and
1:04
you never know what's gonna
happen in the future.
1:08
Maybe we'll wanna add another
event listener at some point.
1:10
Remember, we can get access to
the jQuery event object for
1:13
an event by adding a parameter
to our event handler function.
1:16
The name of the parameter can be anything
we want, but it's common to use event.
1:20
Let's break down what we need to do here.
1:25
When the user clicks on a PDF link,
1:27
we need to check to see if
the checkbox is checked.
1:29
If it's not checked, we need to prevent
the browser's default behavior,
1:34
which is just a trick
the download of the PDF.
1:37
We also need to alert the user.
1:46
If the box is checked,
we don't need to do anything.
1:50
We can just let the browser
trigger the download.
1:52
Let's first stop the PDF from downloading.
1:59
We learned a little about the event
object in an earlier video.
2:02
One of the methods available on
the event object is preventDefault.
2:06
You prevent the browser's default behavior
simply by calling this method on the event
2:10
object like so.
2:14
There are two main reasons
you'd wanna do this.
2:20
The majority of the time, you'll probably
be using the preventDefault method to
2:22
stop a form from submitting.
2:27
By default, the browser will take
whatever information is in the form and
2:28
send it to the server.
2:32
This causes the page to reload, so you'd
use this method to say, hey, browser.
2:34
When the form on this page is submitted,
don't send the information to the server.
2:39
This prevents the browser from
reloading the page on submit.
2:43
The second reason you'd use this method
is to stop the browser from automatically
2:47
following a link after
the user clicks on it.
2:51
And that's what we're using it for today.
2:54
So you'll see that if I save and refresh
the preview and click on the PDF link,
2:56
Looks like we're missing an s here.
3:07
So let's save and preview and
click on the PDF link.
3:10
You'll see now that nothing happens.
3:15
Nothing is downloaded.
3:17
And that's exactly what
we want at the moment.
3:20
Now let's check for checked checkboxes.
3:22
We can do that by using jQuery's
checked pseudo selector.
3:26
Let's open up the console and dev tools
and see what checked returns to us.
3:34
As you can see,
if the checkbox is unchecked,
3:44
it will return to me
what looks like an array.
3:47
As we discussed a bit in a previous video,
this was a jQuery collection,
3:52
which is array-like in that you can
access elements within it by index.
3:56
It also has a length property, which tells
you how many elements are in the array.
4:02
jQuery has returned to us an empty
array-like collection because we're
4:07
asking for all elements on the page
with the property of checked.
4:11
If we expand this collection,
we can see it has a length of 0.
4:16
There are zero items in
the collection because we've
4:21
got nothing on the page that's checked.
4:23
If I check the box and
enter the checked pseudo selector again,
4:26
I'm returned a collection with one
item in it, which is this input here.
4:32
If I expand, I can see that
the collection now has a length of 1.
4:38
So what's happening here is I'm asking for
4:42
all the elements on the page
with a checked attribute.
4:44
And I'm returned a jQuery collection
of all the elements that are checked.
4:48
In this case, this single input.
4:52
Now how is this information useful?
4:56
Just like an array,
4:58
I can use the length property to
see how many elements are checked.
4:59
Because we're only checking
this one checkbox,
5:04
we'll know that if this array has a length
of zero, there are no checked checkboxes.
5:07
If the length is greater than zero,
then we have a checked checkbox.
5:12
So we can say if checked.length === 0,
5:21
then we'll do this stuff here.
5:29
As we just established,
if the link is equal to zero,
5:35
then no checkboxes are checked and we
need to stop the download from happening.
5:38
Else we do nothing and
the link is downloadable.
5:42
Let's move the preventDefault method
into our conditional statement.
5:46
And finally,
let's make an alert pop up to say,
5:55
Please check the box to
allow PDF downloads.
5:59
And we can remove the last comments, since
we don't need to write any code for it.
6:17
Save the file and refresh.
6:22
Click the PDF, and we see the alert.
6:30
And the file isn't downloaded.
6:33
When we check the checkbox and
click the download link, there's no alert.
6:35
And the PDF starts to download.
6:40
Excellent.
6:43
Here's a small challenge for you.
6:44
The checkbox and its parent label
are currently part of the HTML.
6:46
Pause the video and make this code
unobtrusive, so that the checkbox
6:50
isn't present if JavaScript is broken or
otherwise unavailable.
6:54
Then unpause the video, and
I'll show you my solution.
6:58
First, I'll cut the label
in input from the HTML.
7:02
In app.js, I'll use jQuery
to create a new element and
7:10
save it to a variable called PDF checkbox.
7:14
Maybe you used a different variable name,
and that's totally fine.
7:22
Then I appended PDF checkbox
to the links container,
7:38
which is this container right here.
7:42
Now the code works the same,
but it's unobtrusive.
8:07