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.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Stage 2 Challenge Answer

3:01 with Dave McFarland

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