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

Tuan Phan
Tuan Phan
10,825 Points
Posted by Tuan Phan
Tuan Phan
10,825 Points

Photos not displaying, neither the error in console

$(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="gird-25 tablet-grid=50">`;
        photoHTML += `<a href="`+ photo.link +` " class="image">`;
        photoHTML += `<img src="`+ photo.media.m +` "></a></li>`;
      });
      photoHTML += `</ul>`;
    }

    $.getJSON(flickerAPI, flickrOptions, displayPhotos);
  });


}); //end ready

My photos. they did not display, neither the error in console. Can anyone give me some hints please.

5 Answers

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

This is the final code in this video. 

$(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
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.

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Now you use backticks ( ), rewrite backticks to simple apostrophes ( ' ' ).

Check how it works the Template literals

Tuan Phan
Tuan Phan
10,825 Points
Tuan Phan
Tuan Phan
10,825 Points

Thanks but there is no different at least in this case. The problem is somewhere else.

$(document).ready(function() {

$(`form`).submit(function(evt){
  evt.preventDefault();

  // the AJAX part
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  var animal = $(`#search`).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);
  }
  $.getJSON(flickerAPI, flickrOptions, displayPhotos);

})

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

  }); // end click

}); // end ready

You can try to launch my another snippet code for confirming this.

James Churchill
James Churchill
Treehouse Teacher
James Churchill
James Churchill
Treehouse Teacher

Steve,

Did you get this to work? You didn't provide your HTML, so I had to take a guess at it. Here's what my form looks like:

<form>
  <input id="search" type="text">
  <button type="submit">Search</button>
</form>

After adding that form to the HTML that's shown in the course videos, your code worked for me as is.

Thanks ~James

Shravya Enugala
Shravya Enugala
9,663 Points
Shravya Enugala
Shravya Enugala
9,663 Points

I have the same issue in the code, and the photos are not displayed?.

$(document).ready(function() {
  $('button').click(function() {
    $("button".removeClass("selected");
      $(this).addClass("selected");
    var flickerAPI = "http://api.flickr.com/services/feeds/photo_public.gne?jsoncallback=?";
    var animal= $(this).text();
    var flickrOptions = {
      tags: aanimal,
      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 of ready state
James Churchill
James Churchill
Treehouse Teacher
James Churchill
James Churchill
Treehouse Teacher

Shravya,

If you look in your browser's dev tools console, do you see any JavaScript errors? If so, what are they?

Beyond that, I'm seeing the following typos in your code:

1) This call to jQuery is missing a closing parenthesis:

$("button".removeClass("selected");

2) The animal variable in this bit of code is misspelled:

var flickrOptions = {
      tags: aanimal,
      format: "json"
    };

I hope this helps!

Thanks ~James