Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
Prevent the browser from following links on click with the preventDefault() method.
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up