Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

AJAX Basics

Well done!

You have completed AJAX Basics!

Sign up for Treehouse Back to Library

Programming AJAX Challenge

1:52 with Dave McFarland

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

  1. Repeat the 4 steps of the Ajax process
  2. The URL for the JSON data is ../data/rooms.json
  3. 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>
  1. 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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up