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

    In your office, you have six different meeting rooms. 0:00
    Everyone at the company uses them for different 0:02
    things, video conferences, small group meetings, telephone calls. 0:04
    The boss now wants you to create a widget 0:08
    that shows which rooms are available and which are full. 0:10
    The designer has already created a mockup for you 0:13
    to see, as well as example HTML and CSS. 0:15
    This is very similar to the other project. 0:19
    You need to make an AJAX request for 0:23
    JSON data, parse that data, and generate some HTML. 0:24
    You can click the Launch Workspace button to open 0:29

    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