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

Tuan Phan
Tuan Phan
10,824 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,269 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,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.

Adam Beer
Adam Beer
11,269 Points

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

Check how it works the Template literals

Tuan Phan
Tuan Phan
10,824 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

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

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

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