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 trial

JavaScript AJAX Basics (retiring) jQuery and AJAX Stage 3 Challenge Answer

Henri Okajima
Henri Okajima
6,995 Points
Posted by Henri Okajima
Henri Okajima
6,995 Points

Testing .fail(): JSON files and Browser cache

Hello,

I was testing the .fail() method and it comes what looks like a browser cache issue.

The code I wrote is as following:

$(document).ready(() => {
const urlEmployess="../data/employees.json";
 $.getJSON(urlEmployess, (response) => {
    let statusHTML = '<ul class="bulleted">';
    $.each(response, (index, employee) => {
      if (employee.inoffice === true) {
        statusHTML += '<li class="in">';
      } else {
        statusHTML += '<li class="out">';
      }
      statusHTML += employee.name + '</li>';
    });
    statusHTML += '</ul>';
    $('#employeeList').html(statusHTML);
  }).fail(function(jqXHR){
    alert(jqXHR.status);
  });
});

But when I remove the "employees.json" file from data directory the browser continues showing the Employee Office Status... It was expected showing the 404 error alert.

It looks like some browser chache issue. Could anyone confirm that?

How can we garantee that jQuery AJAX methods are not using previous cached data?

Thinking on a continous time chaging data on a JSON file, it would implies on a serious problem to the user coherent data access.

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

Hi Henri. I'm not seeing the same problem. I am using Treehouse 'Workspaces' and Chrome. I replaced my widget.js with yours.

  1. First I checked your code could read the employee status correctly and it does. (You have a typo in your const declaration (urlEmployess) but you have it in your function too so no actual problem).

  2. Like you, I deleted the employees.json file, then reloaded the browser. Your alert message with '404' appears, the 'Employee Office Status' list disappears and in the browser JavaScript console, it correctly reports that... GET http://port-80-7ihmny2492.treehouse-app.com/data/employees.json 404 (Not Found)

  3. So, if you are not already using Workspaces, try this in Workspaces. There are a number of general 'Community' threads about the URL shown in the code i.e. "../data/employees.json". The issue being that for students who actually download the files to their own computers, this may not work as they may need to change the URL to "data/employees.json". If you have downloaded these files, could it be that you may have deleted employees.json from one folder, but your widget.js is still reading it from another?

  4. If you are not using Chrome, try Chrome. And if you are, try a second browser to see if the problem remains.