JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

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
STAFF
Jennifer Nordell
Treehouse Staff

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

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
Jennifer Nordell
Treehouse Staff

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,656 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.