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

Matthew Russo
Matthew Russo
3,871 Points
Posted by Matthew Russo
Matthew Russo
3,871 Points

Photos not displaying

I've tried the pages for both my solution and the provided solution and neither display photos from Flickr. When I click on one of the buttons the grid-container's height gets a little larger but that's it. No grid or photos display.

I'm using Chrome and I'm in the US.

Any ideas what might be going on?

Here's the provided code from the finished folder in case that's useful:

$(document).ready(function() {


 $('button').click(function () {
    // highlight the button
    // not AJAX, just cool looking
    $("button").removeClass("selected");
    $(this).addClass("selected");

    // the AJAX part
    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>';
      }); // end each
      photoHTML += '</ul>';
      $('#photos').html(photoHTML);
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  }); // end click

}); // end ready

Moderator edited: Markdown added so that code renders properly in the forums. -jn

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I just ran your code in Chrome, and the pictures displayed fine for me. I'm wondering if it's a caching issue and it's loading in an older version of your code. Can you try clearing your browser cache and then running this again? I'd be interested in knowing the results.

I look forward to hearing back! :sparkles:

edited for additional note: although it works fine for me as is, the Flickr API documentation states that the endpoint should be over https instead of http. You might consider updating the URL to reflect this.

Matthew Russo
Matthew Russo
3,871 Points
Matthew Russo
Matthew Russo
3,871 Points

Thanks for the answer! Unfortunately neither clearing the browser cache nor changing the URL worked for me. I tried on Firefox and ran into the same issue. At least I know it's not an issue with the code since it worked for you.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Matthew Russo Hi again! Can you confirm that there are no errors in your console and that jQuery is being loaded properly? Unfortunately, all you have listed here is the JS. There are other things that could cause this to fail besides this file and your browser. Also, you haven't stated this explicitly, but I'm guessing you are not doing this with Workspaces. Is this correct?

Diana Ci
Diana Ci
18,672 Points
Diana Ci
Diana Ci
18,672 Points

I had the same problem....the photos would't display. In the console " error $(document).ready(function(){});" The code was perfectly correct. The solution for me was: I've noticed in the Workspaces a directory named "finished", there where all the code, the finished project. So this means all files where double. I deleted this directory "finished" and the page worked fine, the photos displayed.