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

TzeYang Chew
TzeYang Chew
12,039 Points
Posted by TzeYang Chew
TzeYang Chew
12,039 Points

i noticed that there is no photo.html file or the class selected in the given workspace.Can i know why it still works?

i noticed that there is no photo.html file or the class selected in the given workspace.Can i know why it still works?

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

The photo.html file shown in the video was just for demonstration purposes to show what the upcoming js code was going to create.

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I'm not sure why you would be expecting to see a file by that name. There's nothing in the code that references it.

All the photos displayed by this project are fetched directly from flickr and then written into the div element in the index.html page.

The selected class is "photos" and that class is present on the div element.

TzeYang Chew
TzeYang Chew
12,039 Points
TzeYang Chew
TzeYang Chew
12,039 Points

$(document).ready(function () { $('button').click(function () { $("button").removeClass("selected"); $(this).addClass("selected"); var flickrAPI = "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(flickrAPI, flickrOptions, displayPhotos); }); }); // end ready

Hi why is the ul and li code not inside the index.html file but it still works?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

This script code creates a variable named "photoHTML" that contains the code for the ul with several li elements inside it that each contain links and images. Then all that code is added to the index.html page by this line:

    $('#photos').html(photoHTML);

So those elements don't start out inside the index.html file, but they are added by this code.