JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

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

Steven Parker
Steven Parker
182,024 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

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
182,024 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:

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.