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
In this video, I'll explain how I solved the challenge for this stage. Learn how to make multiple AJAX requests on the same page.
-
0:00
How to go.
-
0:01
Where you able to add the meeting room widget to the page.
-
0:03
Let me show you how I did it.
-
0:06
First thing I'll do is make a copy of the original
-
0:09
code and paste it at the bottom of the widget.js file.
-
0:11
[BLANK_AUDIO]
-
0:20
When making multiple AJAX requests you should
-
0:23
create separate xhr objects for each request.
-
0:26
But they do need to have different variable names.
-
0:30
I'll just replace xhr here with roomRequest.
-
0:33
That means I also need to change that
-
0:35
variable name everywhere it appears in my code.
-
0:37
[BLANK_AUDIO]
-
0:58
I need to adjust other variable names as well.
-
1:00
For example, I'll change employees to rooms.
-
1:04
This variable will hold the parsed JSON string.
-
1:07
I'll use that variable name in a few other places as well.
-
1:09
[BLANK_AUDIO]
-
1:19
Next, the HTML changes a bit.
-
1:21
I need to adjust this ul tag by changing the class
-
1:24
name, so that different CSS styles can apply to this widget.
-
1:29
Now when you direct the HTML, saying whether the room
-
1:32
is available or not, let's look at the JSON feed again.
-
1:36
Okay, we need to check the available property, to
-
1:38
see if a room is being used or not.
-
1:39
[BLANK_AUDIO]
-
1:48
I'll change the class on this list item from in to empty.
-
1:53
And on this one from out to full.
-
1:56
[BLANK_AUDIO]
-
2:00
I need to add the room name inside the
-
2:02
list item, so let's look at the JSON feed again.
-
2:05
Okay, the room's name is room, that's simple.
-
2:11
Since the HTML goes in a different div on the page, we need to select that.
-
2:15
[BLANK_AUDIO]
-
2:18
And finally, the source for our JSON data has changed.
-
2:21
[BLANK_AUDIO]
-
2:26
Let's save this file and preview it, see how it works.
-
2:31
Perfect.
-
2:33
If you were able to finish the challenge, did you program it differently than me.
-
2:37
If so, that's cool.
-
2:38
In programming, there's always more than one way to get to the same result.
-
2:42
If you had trouble with the challenge, I'd recommend you try again.
-
2:45
Go back to the previous video and launch the workspace.
-
2:48
See if you can make the changes to get to the final result.
-
2:52
In the next stage of this course, we'll look at how jQuery,
-
2:55
a wildly popular JavaScript library makes
-
2:57
AJAX programming simpler, faster, and more fun.
You need to sign up for Treehouse in order to download course files.
Sign up