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

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

Can you please share your code?

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,608 Points

Can you please post the html as well?

And you are missing a semi colon here

var $submitButton = $('#submit')

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,608 Points

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

3 Answers

I have, yes semi colon is in place now.

Hugo Paz
Hugo Paz
15,608 Points

Paul, its just a typo,

you have

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

if should be with a capital F

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

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