Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

Alaric Wimer
Alaric Wimer
7,940 Points

Stage 4 Optional Challenge: How can I display different photos each time the user enters the same search term?

I'm wondering if someone could point me in the right direction. For example, if a user enters "cat", hits submit, and enters "cat" again, the same images appear. I'd like to get the page to display new photos each time. I think the solution lies in using $.each() method but making "i" a random number. Just not sure how to do that. Any help would be greatly appreciated.

Here's my code:

$(document).ready(function() {
 $('form').submit(function (evt) {
   evt.preventDefault();
   var $searchField = $("#search");
   // disable and change the text of submit button after clicking on it
   var $submitButton = $('#submit');
   $searchField.prop("disabled", true);
   $submitButton.prop("disabled", true).val("searching...");

    // the AJAX part
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var searchTerm = $('#search').val();
    var flickrOptions = {
      tags: searchTerm,
      format: "json"
    }; // end flickrOptions
    function displayPhotos(data) {
      // print a message if no photos are found
      if (data.items.length === 0) {
        alert("Sorry, no images match your search term '" + searchTerm + "'");
        //reenable the search field
        $searchField.prop("disabled", false);
        // reenable the submit button and change it's value back
        $submitButton.prop("disabled", false).val("Search");
      } else { // build the html while looping through the array
      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>';
      // add photoHTML to the webpage
      $('#photos').html(photoHTML);
      //reenable the search field
      $searchField.prop("disabled", false);
      // reenable the submit button and change it's value back
      $submitButton.prop("disabled", false).val("Search");
      } // end if/else
    } // end displayPhotos()
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  }); // end submit

}); // end ready

1 Answer

Steven Parker
Steven Parker
218,635 Points

Where was this "optional challenge" stated? Since the service sends back a list of specific images based on the search term, i'm not sure how you can get different ones.

You could, of course, scramble the order in which they are displayed, but $each wouldn't help with that. And that seems like a lot of trouble since they'd still be the same images.