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
Ready to try some AJAX programming on your own? In this challenge you'll get instructions for creating another widget for a company's intranet.
Challenge Steps
- Repeat the 4 steps of the Ajax process
- The URL for the JSON data is
../data/rooms.json - Finished widget HTML looks like this:
<ul class="rooms">
<li class="full">101</li>
<li class="empty">102</li>
<li class="full">103</li>
<li class="full">104</li>
<li class="empty">105</li>
<li class="empty">106</li>
</ul>
- Complete HTML goes inside a div with the ID of
roomList
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
Congratulations.
0:00
The boss was so happy with the employee
widget you created
0:01
that he's asked for you to add another
item to the website.
0:04
In your office, you have six different
meeting rooms.
0:08
Everyone at the company uses them for
different
0:11
things, video conferences, small group
meetings, telephone calls.
0:13
The boss now wants you to create a widget
0:17
that shows which rooms are available and
which are full.
0:19
The designer has already created a mockup
for you
0:22
to see, as well as example HTML and CSS.
0:24
This is very similar to the other project.
0:28
You need to make an AJAX request for
0:32
JSON data, parse that data, and generate
some HTML.
0:33
You can click the Launch Workspace button
to open
0:38
a new workspace with the project you just
finished.
0:41
Add your new programming to the widget.js
file,
0:44
the same file the other programming is in.
0:48
Here are a few key points for you to keep
in mind.
0:51
These are also listed in the teacher's
notes on this page.
0:54
First, you'll be adding another AJAX
request, so you need
0:57
to repeat the same four steps of the AJAX
process.
1:00
You'll have to create a second XML HTTP
Request object, a new callback
1:03
for the object, and use the open and send
methods on that object.
1:09
Second, the URL for the JSON data has
changed.
1:13
It's ../data/rooms.json.
1:17
Third, the basic HTML for the finished
widget will look like this.
1:22
[SOUND] Fourth, the complete HTML goes
inside a div with the ID of roomList.
1:25
Because this widget works a lot like the
employee status
1:34
widget, you can start by making a
duplicate of that code.
1:36
Just copy the code in the widget.js file
and paste it at the end.
1:40
If you have trouble, you can go to the
forum and ask for some help.
1:44
If you just wanna know the answer, I'll
show you
1:47
how to program this new widget in the next
video.
1:49
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