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 Introducing jQuery

Posted by Milagro Scardigno
Milagro Scardigno
4,494 Points

Uncaught ReferenceError: sendAJAX is not defined

Stage 3 of Ajax Basics and running the index.html file with the following code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX with JavaScript</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  function sendAJAX() {
    $('#ajax').load('sidebar.html');
    $('#load').hide();
  }
  </script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Bring on the AJAX</h1>
          </div>
          <button id="load" onclick="sendAJAX()" class="button">Bring it!</button>
          <ul id="ajax">

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

I get an "Uncaught ReferenceError: sendAJAX is not defined" when clicking the button.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Milagro,

I just tried your code and it is working. Di you make any changes?

Milagro Scardigno
Milagro Scardigno
4,494 Points

It is weird because the file jquery-example.html in stage 3 video 1 works fine, but the index.html does not. :(

Milagro Scardigno
Milagro Scardigno
4,494 Points 
<!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>AJAX with JavaScript</title>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  // var xhr = new XMLHttpRequest();
  // xhr.open('GET', 'sidebar.html');
  // xhr.onreadystatechange = function () {
  //   if (xhr.readyState === 4) {
  //     document.getElementById('ajax').innerHTML = xhr.responseText;
  //   }
  // };

  // function sendAJAX() {
  //   xhr.send();
  //   document.getElementById('load').style.display = 'none';
  // }

  function sendAJAX() {
    $('#ajax').load('sidebar.html');
    // $('#load').hide();
  }


  </script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Bring on the AJAX</h1>
          </div>
          <button id="load" onclick="sendAJAX()" class="button">Bring it!</button>
          <ul id="ajax"></ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

How are you running this? I am running it on localhost and it does not work.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Have a look at this workspace http://port-80-6gmnaqxf9a.treehouse-app.com/

The code i used was

index.html

<!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>AJAX with JavaScript</title>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>

  function sendAJAX() {
    $('#ajax').load('ajaxRequest.html');
    $('#load').hide();
  }


  </script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Bring on the AJAX</h1>
          </div>
          <button id="load" onclick="sendAJAX()" class="button">Bring it!</button>
          <ul id="ajax"></ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

ajaxRequest.html

<h2>It works</h2>
Milagro Scardigno
Milagro Scardigno
4,494 Points

Thank you. I just flushed my dns cache and works.