Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
This video doesn't have any notes.
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
How'd it go, were you able to add
the meeting room widget to the page?
0:00
Let me show you how I did it.
0:03
First thing I'll do is make
a copy of the original code, and
0:06
paste it at the bottom
of the widget.js file.
0:09
When making multiple AJAX requests,
you should create separate xhr objects for
0:20
each request, but they do need to
have different variable names.
0:25
I'll just replace xhr
here with roomRequest.
0:30
That means I also need to change
0:36
that variable name everywhere
0:41
it appears in my code.
0:47
I need to adjust other
variable names as well.
0:58
For example,
I'll change employees to rooms.
1:00
This variable will hold
the parsed JSON string.
1:04
I'll use that variable name in
a few other places as well.
1:07
Next, the HTML changes a bit.
1:19
I need to adjust this ul tag
by changing the class name, so
1:21
that different CSS styles
can apply to this widget.
1:25
Now, we need direct HTML saying
whether the room is available or not.
1:29
Let's look at the JSON feed again.
1:33
Okay, we need to check the available
property to see if a room is being
1:36
used or not.
1:39
I'll change the class on this
list item from in to empty,
1:45
and on this one, from out to full.
1:52
I need to add the room name
inside the list item, so
2:01
let's look at the JSON feed again.
2:03
Okay, the room's name is room,
that's simple.
2:05
Since the HTML goes in a different div
on the page, we need to select that.
2:11
And finally, the source for
our JSON data has changed.
2:19
Let's save this file and
preview it, see how it works.
2:26
Perfect, if you were able
to finish the challenge,
2:31
did you program it differently than me?
2:34
If so, that's cool, in programming,
2:36
there's always more than one
way to get to the same result.
2:38
If you had trouble with the challenge,
I'd recommend you try again.
2:42
Go back to the previous video and
launch the workspace.
2:44
See if you can make the changes
to get to the final result.
2:47
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