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

no photos and code does not work

Why do none of the photos show and my code does not work? Can someone tell me where I am going wrong?

$(document).ready(function() {
 $('form').submit(function (evt) {
    evt.preventDefault();
   var searchTerms = $('#search').val();
   var subButton = $('#submit').val ().val("searching...");

   $searchTerms.prop("disabled", true);
   $subButton.attr("disabled", true);
    // the AJAX part
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = searchTerms.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);
      $searchTerms.prop("disabled", false);
      $subButton.prop("disabled", false).val("Search");
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  }); // end click

}); // end ready
Dave McFarland
Dave McFarland
Treehouse Teacher

To put code into a forum post use triple back ticks -- ``` — around the code. I fixed your code here, but in the future here's a forum discussion that describes how to add HTML, CSS, JavaScript or other code to the forum: https://teamtreehouse.com/forum/posting-code-to-the-forum

1 Answer

Brandon Dyal
Brandon Dyal
16,544 Points

You declared the variables searchTerms and subButton but put a $ in front of them when you called them. That is probably causing the issue.

I love bugs. Thanks Brandon I appreciate it !