JavaScript AJAX Basics (retiring) Programming AJAX Stage 2 Challenge

Chetan Jaisinghani
Chetan Jaisinghani
2,896 Points

Only 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
Emmanuel Plouvier
11,919 Points

It'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 &amp;&amp; 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(&quot;roomList&quot;).innerHTML = statusHTML2;
}
};
Chetan Jaisinghani
Chetan Jaisinghani
2,896 Points

I hate myself for committing such a silly error. Thank you so very much for such a prompt response!

Emmanuel Plouvier
Emmanuel Plouvier
11,919 Points

Hi,

Can you post your files ? :)

thanks.

I was having the same problem. Thanks Emmanuel.