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 Displaying the Photos

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Callback not picking up Flickr images

I seem to have exhausted all my idea as to why this code isn't picking up the feeds when I click the buttons. I've done this in workspaces.

I've checked the resource URL is correct. I've checked for spelling errors of attributes I've checked I've concatenated everything correctly. I've checked my variable references in my $.get() method are correct I've checked every last line of code. I've saved and refreshed my workspace file a million times.

I've checked i've linked jQuery correctly. Not even the the 3 buttons are working any more, so I can tell there's a problem somwhere with the code. I can tell it's going to hit me like a ton of bricks when it's pointed out but...

Help. I can't seem to work out what I've done wrong. :D

$(document).ready(function () {
  $("button").click(function () {
      $("button").removeClass("selected");              
      $(this).addClass("selected");  

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

      photoHTML += '</ul>';
      $('#photos').html(photoHTML);

    }

      $.getJSON(flickerAPI, flickrOptions, displayPhotos);  //3 arguments:  url, data options,  callback function
  });

});//end ready

``

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Solved.

There was a stray > where it shouldn't have been on line 16

So I replaced

photoHTML += '<li class="grid-25 tablet-grid-50"'>;

with

photoHTML += '<li class="grid-25 tablet-grid-50">';