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

Jeremiah Lugtu
Jeremiah Lugtu
9,910 Points
Posted by Jeremiah Lugtu
Jeremiah Lugtu
9,910 Points

Works but button filters (Dog, Cat & Moose) does not apply to photo result... help?

http://port-80-26xydc470g.treehouse-app.com/

//url
var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

//data
var animal = $(this).text();
var flickrTags = {
  tags: animal,
  format: "json"
};

//callback
var displayPhotos = function(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);
};

$(document).ready(function (){
  $('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
              //url,       data          callback
    $.getJSON(flickrAPI, flickrTags, displayPhotos);
  })
});

It works when I insert all the variables within the button function, but how to do it this way(where the variables are separate from the function)?

Lastly, why is my code mostly orange here? I saw other people having their post that include codes have yellow colors, etc...

1 Answer

Paul Penketh
PLUS
Paul Penketh
Courses Plus Student 10,165 Points
Paul Penketh
Paul Penketh
Courses Plus Student 10,165 Points

Hi, this isn't working because you're using the $(this) keyword outside of the button click.

If you want to do it this way, you'll need to update the flickrTags' tags each time the button is clicked.

var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

//data
var animal = $(this).text();
var flickrTags = {
  tags: animal,
  format: "json"
};

//callback
var displayPhotos = function(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);
};

$(document).ready(function (){
  $('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
    flickrTags.tags = $(this).text();
    $.getJSON(flickrAPI, flickrTags, displayPhotos);
  })
});

The flickrTags.tags = $(this).text(); updates the flickrTags object before fetching the data.

If you specify the language on the same line as the backticks to show the code starts - that will help with the formatting of your code.

Hope this helps!