This course will be retired on February 5, 2020. We recommend "AJAX Basics" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
The first step in this large project is getting the page set up to use jQuery -- linking to the jQuery library file and adding some basic programming.
-
0:00
Good news, this job is definitely doable.
-
0:03
The designers html and CSS look great.
-
0:06
And Flicker's public photo feed will give us
-
0:08
all the information we need to build this project.
-
0:11
It's time to start programming.
-
0:14
Feel free to launch the workspace on this page, to follow along.
-
0:18
The first thing we need to do is clean up this html.
-
0:22
I'm going to delete the UL tag in here.
-
0:24
It's just full of temporary html that the designer gave us.
-
0:28
We'll use AJAX to put new information in there.
-
0:32
We know we're going to use jQuery, so we need to link to the jQuery library.
-
0:36
I'm gonna use jQuery's own content delivery network,
-
0:40
so I'll add a script tag to link there.
-
0:43
It's a good idea to put the programming
-
0:44
for this project into a separate java script file.
-
0:47
That way we could reuse it on other pages easily.
-
0:51
I'll create a new file and call it flickr.js
-
0:53
and link to it in the head of this webpage.
-
0:55
[BLANK_AUDIO]
-
1:03
As I mentioned in the last stage, when you put your jQuery code near the top of
-
1:08
your html, in this case it'll load through the flickr.fs file at the top of our page.
-
1:13
You need to use a special function called $(document).ready, to make
-
1:18
sure your JavaScript code doesn't run before the html is fully loaded.
-
1:23
[BLANK_AUDIO]
-
1:30
We haven't yet added any of the programming
-
1:32
that's going to help us load Flickr photos.
-
1:35
We'll do that now.
-
1:37
Let's look at the mock up again.
-
1:40
So when one of the buttons is clicked, the photos load, okay?
-
1:43
The designer also told us that when
-
1:45
a visitor clicks a button, it changes appearance.
-
1:49
We can do that by adding a class to the Click Button tag.
-
1:53
jQuery makes this easy.
-
1:56
First, let's add what's called an event handler, so
-
1:59
that when a button is clicked, our program runs.
-
2:04
This code is jQuery's way of selecting all of the buttons on this page.
-
2:09
We only have the three buttons in our html.
-
2:11
The ones labeled cat, dog, and moose.
-
2:14
jQuery's now selected the buttons on the page, and
-
2:16
you can run additional commands or functions on each element.
-
2:20
In this case, let's add the click method.
-
2:22
jQuery click method is another helper function.
-
2:27
It adds a click event handler to each of the buttons.
-
2:31
In other words, that bit of code lets us add a
-
2:33
function that runs each time one of the buttons is clicked.
-
2:38
Next we'll add an anonymous function.
-
2:39
[BLANK_AUDIO]
-
2:45
All of the programming that we put inside here,
-
2:47
will run whenever one of the buttons is clicked.
-
2:51
This is a callback function for the click event.
-
2:54
The first thing, is we want to highlight a click button.
-
2:57
We can do this by using jQuery to add a new class on the clicked button.
-
3:02
The $this, is a way to indicate
-
3:05
the element that's responding to the click event.
-
3:07
In other words, $this refers to the button the user
-
3:11
clicks, and only that button, not any of the other ones.
-
3:16
Let's see how this works.
-
3:23
Cool, but what happens when I click another button?
-
3:26
It highlights 2, but the other doesn't change back.
-
3:31
Okay, let's fix that.
-
3:33
What we could do is we could remove the class
-
3:36
selected from all of the buttons, when one button is clicked.
-
3:45
The code here needs to go before the other code, otherwise the user would
-
3:50
click a button, it would be highlighted,
-
3:52
then immediately after the class would be removed.
-
3:55
Let's see how this works.
-
3:56
[BLANK_AUDIO]
-
3:59
Great, each button highlights when clicked.
-
4:03
All right, it's time to move on to the
-
4:04
next step, actually programming the AJAX request and callback.
You need to sign up for Treehouse in order to download course files.
Sign up