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 Anthony Boardman
Anthony Boardman
4,672 Points

In the app.js file, use jQuery to select the footer div of the web page. Look at the index.html

Challenge Task 1 of 2

In the app.js file, use jQuery to select the footer div of the web page. Look at the index.html file to see how the HTML is structured.

My code:

function sendAJAX() {
 $('#footer').load('footer.html');
}

I've tried 

function sendAJAX() {

}

I get this error message: Bummer! When selecting a page element with jQuery, pass a CSS selector to the $() method.

I've everything I can think of I've rewatched the video three times and copied the code down over and over and I can't find any way to get it working!

alborz
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,885 Points

Which video is this on exactly?

3 Answers

ellie adam
ellie adam
26,377 Points
ellie adam
ellie adam
26,377 Points

$('#footer').load('footer.html')

Cameron Mosser
Cameron Mosser
7,102 Points
Cameron Mosser
Cameron Mosser
7,102 Points

Short Answer

$('#footer').load('footer.html')

Detailed Answer

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX with JavaScript</title>
</head>
<body>
  <div id="main">
    <h1>AJAX with jQuery</h1>
  </div>
  <div id="footer"></div> // here, line #11, this is the line we will target using jQuery
  <script src="jquery.js"></script>
  <script src="app.js"></script>
</body>
</html>

OK, now that we have found the specific <div> tag we want to target, we can do so by using the ID it was assigned. This particular div has been assigned an ID of "footer".

We must now target <div id="footer"> and prompt it to load using this bit of jQuery:

$('#footer').load('footer.html')

jQuery Breakdown:

$('#footer')

The $ symbol is a jQuery selector, it selects the element with the ID.

.load('footer.html')

.load is a jQuery method which requests a chunk of HTML and inserts it into the page.

Matthew Hicks
Matthew Hicks
9,844 Points
Matthew Hicks
Matthew Hicks
9,844 Points

Hi, I haven't done this course yet, but have you checked you're selecting the right sort of element? in your code you are selecting an id called footer. Does the HTML use an id called footer or is it just using the footer tag? If it is, just drop the #. Like I said, I haven't done this yet so it's just a stab in the dark.