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

Posted by George Akinian
George Akinian
17,615 Points

anyone else is getting an Uncaught ReferenceError: $searchField is not defined?

submit does not return anything for some reason.

Richard Barkinskiy
Richard Barkinskiy
10,663 Points
Richard Barkinskiy
Richard Barkinskiy
10,663 Points

Can you please share your code?

George Akinian
George Akinian
17,615 Points

here it is : 

$(function() {


 $('form').submit(function (evt) {
   evt.preventDefault();
   var $searchField = $('#search');
   var $submitButton = $('#submit');




    // the AJAX part
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $searchField.val();
    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

}); // end ready
Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Can you please post the html as well?

And you are missing a semi colon here

var $submitButton = $('#submit')
George Akinian
George Akinian
17,615 Points

sure thing.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AJAX Flickr Photo Feeder</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 src="js/flickr.js"></script>

</head> <body> <div class="grid-container centered"> <div class="grid-100"> <div class="contained"> <div class="grid-100"> <div class="heading"> <h1>Flickr Photo Feeder</h1> <form> <label for="search">Type a search term</label> <input type="search" name="search" id="search"> <input type="submit" value="search" id="submit"> </form> </div>

    </div>

    <div id="photos">


    </div>
  </div>
</div>

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

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

Paul, did you add the semi colon when you define var $submitButton ?

3 Answers

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

Paul, its just a typo,

you have

var $searchfield = $('#search');

if should be with a capital F

var $searchField = $('#search');
George Akinian
George Akinian
17,615 Points
George Akinian
George Akinian
17,615 Points

I have, yes semi colon is in place now.

George Akinian
George Akinian
17,615 Points
George Akinian
George Akinian
17,615 Points

Woo-Hoo it works. Maybe i have been staring at code for too long. Cool beans. thanks !