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

Posted by roberto benites
roberto benites
2,897 Points

Can someone show what this would look like with jQuery?

I would like to see what the code would look like using jQuery.

Specifically i was trying to work out the onClick for the button.

Not sure how to get it so that after the button is hidden the sendAJAX() function is called and the text displays as it does with how i have it set up now. At least i think that's whats going on.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href='//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>
 var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
      //  document.getElementById('ajax').innerHTML=xhr.responseText;
        $('#ajax').html(xhr.responseText);
      }
    };
     xhr.open('GET', 'sidebar.html');
    function sendAJAX(){
    xhr.send();
      $('#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>
            <button id='load' onClick='sendAJAX()'>Bring it</button>
          </div>
          <div id="ajax">

          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</body>
</html>

1 Answer

Steven Parker
Steven Parker
241,488 Points
Steven Parker
Steven Parker
241,488 Points

jQuery is particularly handy for AJAX. The entire script section can be replaced with this:

function sendAJAX() {
  $("#ajax").load("sidebar.html");
  $('#load').hide();
}
roberto benites
roberto benites
2,897 Points

AWESOME!!! Damn that might have been good to cover in the video. OK so its better to leave the onClick action that calls the function in the HTML instead of doing a jQuery for it?

Steven Parker
Steven Parker
241,488 Points
Steven Parker
Steven Parker
241,488 Points

Remove the "onClick" property from the button and use this version instead:

$("#load").click(_=> {
  $("#ajax").load("sidebar.html");
  $('#load').hide();
});