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

General Discussion

Posted by baderbouta
baderbouta
7,804 Points

AJAX Course, critical bug?

Hello,

I was following along with the AJAX course, specifically this video https://teamtreehouse.com/library/a-simple-ajax-example, I was following the course and nothing seemed to work, I must’ve made a mistake right? So i carefully copied the code from the project files, still did not work…

After doing this over and over again I’ve noticed that there probably is bug going on where no saves are made at all to the browser. All the code that I’ve written did not even show up in the source-code when inspecting it with the Chrome dev tools. I thought I was going nuts but this problem is super frustrating since I waster 2 hours on redoing all this code while in reality something else is going on…

Here is a illustration of the problem:

Code: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <title>TEST AJAX with JavaScript THE BROSWER DOES NOT UPDATE</title>
  <script>

   let xhr = new XMLHttpRequest();

   xhr.onreadystatechange = function () {
     if(xhr.readyState === 4) {
        document.getElementById('ajax').innerHTML = xhr.responseText;
      }
    };

   xhr.open('GET', 'sidebar.html');


   function sendAJAX() {
      xhr.send();


  </script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <h1>TEST TEST TEST TEST TEST the AJAX</h1>
          <p>Hello world!!!</p>
          <ul id="ajax">

          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Screenshot: https://pasteboard.co/HHMZPCA.png

Anyone knows what the hell is going on?