Programming AJAX Solution2:51 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.
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 up