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

Kyle Kirst
Kyle Kirst
9,884 Points
Posted by Kyle Kirst
Kyle Kirst
9,884 Points

Problem with subsequent clicks on animal filter buttons

My code successfully loads photos from Flickr the initial time I click the animal filter buttons. However on subsequent clicks of the other buttons, it fails to load different photos. I have logged out the FlickrOptions to the console, and it is correctly passing the correct animal into the options, but I'm still not seeing the photos with them. Any ideas?

You can view my code here: http://codepen.io/calbear47/pen/yYpXgm

EDIT: If anyone has a similar problem....I found my error! I needed to "clear out" the <div id="photo"> element before loading up new content. Before I fixed the bug, I was attempting to append multiple <ul> elements in the same div. I fixed this on line 17 of my code above in my displayPhotos function.

1 Answer

lakindujayathilaka
lakindujayathilaka
15,244 Points
lakindujayathilaka
lakindujayathilaka
15,244 Points

Bro i have altered your JavaScript file..now it loads new pics when u click on different buttons...but it only appends those images to the end of the previous searched images <blockquotes>

$(document).ready( function() {

$('button').click( function(){
    $("button").removeClass('selected'); 
    $(this).addClass('selected'); 
    var animal = $(this).text();
    var dataFeedURL = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
    var flickrOptions = {
      tags: animal,
      format: "json"
    };
    console.log(flickrOptions); 


function displayPhots(data){
    var photoWrapper = $("#photos"); 
    var photoList = $("<ul></ul>"); 
    $.each(data.items, function(index, photo){
          var listItem = $("<li></li>");
          var linkItem = $("<a></a>"); 
          var imgItem = $("<img>"); 
          listItem.append(linkItem); 
          linkItem.append(imgItem); 
          listItem.addClass("grid-25 tablet-grid-50"); 
          linkItem.attr("href", photo.link); 
          linkItem.addClass("image"); 
          imgItem.attr("src", photo.media.m); 
          photoList.append(listItem); 
    });//end of each 
    photoWrapper.append(photoList); 
  }//end displayPhotos 

  $.getJSON(dataFeedURL, flickrOptions, displayPhots);
  }); //end click event handler 
});//end ready

</blockquotes> If you want to make the previously searched images disappear after doing a new search...change from buttons to form its easy that way..if i managed to help u please mark my answer as the best