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

Tommy Izen
Tommy Izen
5,746 Points
Posted by Tommy Izen
Tommy Izen
5,746 Points

The index.html in "_finished_" doesn't load images when the buttons are clicked. What is happening here?

I was having problems finding an issue with my code. After running several other people's code that had been corrected and their code didn't work I ran the "finished" code and that doesn't work either so I can't verify if there is a correct version of the code to compare with my own.

I plan on making an app using apis and ajax after completing this project, any assistance with this problem would be greatly appreciated!

Thanks.

This is my code - 

$(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);
  });          
});  //end ready

3 Answers

Russ Fleharty
seal-mask
.a{fill-rule:evenodd;}techdegree
Russ Fleharty
Python Web Development Techdegree Student 10,815 Points
Russ Fleharty
.a{fill-rule:evenodd;}techdegree
Russ Fleharty
Python Web Development Techdegree Student 10,815 Points 
$(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 flickerOptions = { 
    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, flickerOptions, displayPhotos);
  });
}); //end ready

This is what I did awhile ago. Check out for syntax errors. Hope it helps man. Also, Make sure you've linked your documents properly in index.html.

Tommy Izen
Tommy Izen
5,746 Points
Tommy Izen
Tommy Izen
5,746 Points

Thanks. I ran your code and the finished code again and got the same thing. :( Can you verify that your code displays the photos in your browser? The code from the course instructor won't run which is odd.

Russ Fleharty
seal-mask
.a{fill-rule:evenodd;}techdegree
Russ Fleharty
Python Web Development Techdegree Student 10,815 Points
Russ Fleharty
.a{fill-rule:evenodd;}techdegree
Russ Fleharty
Python Web Development Techdegree Student 10,815 Points

Yea. I just ran my code and it opened up the pictures just fine. Make sure you linked everything in HTML.

<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="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="js/flickr.js"></script>
Tommy Izen
Tommy Izen
5,746 Points
Tommy Izen
Tommy Izen
5,746 Points

Well, I just posted my code here on Codepen and it works. http://codepen.io/anon/pen/yyQNrJ I didn't change anything...weird. The same problem happens on Cloud9. This is frustrating.