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) AJAX and APIs Stage 4 Challenge Answer

John Green
John Green
13,640 Points
Posted by John Green
John Green
13,640 Points

I am getting an uncaught reference error on $searchField not defined. I cannot figure this out.

Heres the code: $(document).ready(function() {

$('form').submit( function(evt) { evt.preventdefault(); //Prevent the form from loading. //Retrieve the value the visitor typed in the input field send that value to the Flickr API (remember //the tags property). var $searchField = $('#search');

});

// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var animal = $searchField.val();     //$(this).text();
var flickrOptions = {
  tags: animal,
  format: "json"
};
function displayPhotos(data) {
  var photoHTML = '<ul>';
  $.each(data.items,function(i,photo) {
    photoHTML += '<li class="grid-25 tablet-grid-50">';
    photoHTML += '<a href="' + photo.link + '" class="image">';
    photoHTML += '<img src="' + photo.media.m + '"></a></li>';
  }); // end each
  photoHTML += '</ul>';
  $('#photos').html(photoHTML);
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);

}); // end click

3 Answers

Dan MacDonagh
Dan MacDonagh
4,615 Points
Dan MacDonagh
Dan MacDonagh
4,615 Points

I dunno if you still need help with this, but change this

var animal = $searchField.val();

with this

var animal = $('#search').val();

This is to select the default ID of the search input tag in the HTML:

<input type="search" name="search" id="search">

If you changed that ID to something different, make sure your jquery selector reflects that.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

You have "searchField" defined inside the submit event handler.

So it is not available when you try to use it to assign animal outside the handler.

Is it possible that handler was ended too soon? Maybe it should include "the AJAX part"?

John Green
John Green
13,640 Points
John Green
John Green
13,640 Points

Thanks, but I don't think its a scope issue. I redid the entire program and still came up with the same error.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

It's definitely a scope issue in the code above.

So what's the code look like now?

Also, check the Markdown Cheatsheet pop-up below the answer section for info about code quoting. :arrow_heading_down: