Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialChetan Jaisinghani
2,896 PointsOnly 1 AJAX request is processed
So I was working on this challenge and the code is working all fine for the employee widget as well as the available room widget. There are no errors in the code at all. However, when I preview the file, only one of the AJAX requests is processed and the other one doesn't.
I have 2 .js files. One for employee widget and the other for available rooms widget. When I link both the scripts in the index.html, only the data for the rooms widget is processed and the data for employee widget doesn't appear at all. The console however logs both the requests and shows that both requests have been successfully processed. If I link just the employee widget file in my index.html, it works fine, but if I have both the employee widget and the available room widget files, the former doesn't seem to work at all!
What's going on?
var xhr2 = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr2.readyState === 4 && xhr2.status === 200){
var meetingRooms = JSON.parse(xhr2.responseText);
var statusHTML2 = '<ul class="rooms">';
for(var i = 0; i < meetingRooms.length; i += 1){
if (meetingRooms[i].available === true){
statusHTML2 += '<li class="empty">';
} else {
statusHTML2 += '<li class="full">';
}
statusHTML2 += meetingRooms[i].room;
statusHTML2 += '</li>';
}
statusHTML2 += '</ul>';
document.getElementById("roomList").innerHTML = statusHTML2;
}
};
xhr2.open("GET", "../data/rooms.json");
xhr2.send();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for (var i=0; i<employees.length; i += 1) {
if (employees[i].inoffice === true) {
statusHTML += '<li class="in">';
} else {
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name;
statusHTML += '</li>';
}
statusHTML += '</ul>';
document.getElementById("employeeList").innerHTML = statusHTML;
}
};
xhr.open('GET', '../data/employees.json');
xhr.send();
```
3 Answers
Emmanuel Plouvier
11,919 PointsIt's just a missing in the second file, you update the same var xhr
with the onreadystatechange
, try like that :
xhr2.onreadystatechange = function(){
if (xhr2.readyState === 4 && xhr2.status === 200){
var meetingRooms = JSON.parse(xhr2.responseText);
var statusHTML2 = '';
for(var i = 0; i
if (meetingRooms[i].available === true){
statusHTML2 += '<li class="empty">';
} else {
statusHTML2 += '<li class="full">';
}
statusHTML2 += meetingRooms[i].room;
statusHTML2 += '</li>';
}
statusHTML2 += '';
document.getElementById("roomList").innerHTML = statusHTML2;
}
};
Emmanuel Plouvier
11,919 PointsHi,
Can you post your files ? :)
thanks.
Chetan Jaisinghani
2,896 PointsUpdated :)
Rick Klaras
20,183 PointsI was having the same problem. Thanks Emmanuel.
Chetan Jaisinghani
2,896 PointsChetan Jaisinghani
2,896 PointsI hate myself for committing such a silly error. Thank you so very much for such a prompt response!