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 Stage 4 Challenge Answer

Ebrahim Haji
Ebrahim Haji
6,712 Points
Posted by Ebrahim Haji
Ebrahim Haji
6,712 Points

Here is my solution to the challenge mentioned in the end.

Here is the code.

$(document).ready(function() {
  //submit 
 $('form').submit(function (event) {
    event.preventDefault();
    // the AJAX Part. Necessary variables created
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var searchValue = $('input[type=search]').val();
    var flickrOptions = {
      tags: searchValue,
      format: "json"
    };

    $('#search').prop("disabled", true);
    $('#submit').prop("disabled", true).val("Wait");

    function displayPhotos(data) {
   // Check Condition
      if ($.isEmptyObject(data.items) === false) {
          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
         //Start HTML and Form Manipulation
          photoHTML += '</ul>';
          $('#photos').html(photoHTML);
          $('#search').prop("disabled", false);
          $('#submit').prop("disabled", false).val("Search");
      } else {  
        $('#search').prop("disabled", false);
        $('#submit').prop("disabled", false).val("Search");
        $('#photos').html('<b>' + searchValue + '</b> ' + 'is not a valid search term.' + ' Try Again.');
      }      
    } // end Function

   $.getJSON(flickerAPI, flickrOptions, displayPhotos);
  }); // end click

}); // end ready
Christopher Carrasco
Christopher Carrasco
20,679 Points
Christopher Carrasco
Christopher Carrasco
20,679 Points

Awesome! I knew I had to check a conditional, but never learned (or possibly don't remember learning) the isEmptyObject for jquery. Thanks!!!

5 Answers

Emerson Gutierrez
Emerson Gutierrez
5,780 Points
Emerson Gutierrez
Emerson Gutierrez
5,780 Points

Based on the excellent solution of @Ebrahim Haji, I made a few small changes, so when the error message is displayed for not finding photos with the search term, hide the ul with previous images (only applies if you had already done a search).

$(document).ready(function() {


 $('form').submit( function (evt) {
    //Prevent default
   evt.preventDefault();
   var searchField = $('#search');   
   var submitButton = $('#submit');

   searchField.prop('disabled', true); 
   submitButton.attr('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"
    };
    function displayPhotos(data) {
      if ($.isEmptyObject(data.items) === false){ 
        $('#photos').show();
        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);
        $('#error').hide();
      } else {
        $('#photos').hide();
        $('#error').html('<h2>We cant find anything whit the term "' + searchTerm + 
        '". Try again with another word</h2>').show();
      }
      searchField.prop('disabled', false); 
      submitButton.attr('disabled', false).val('Search');
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  }); // end submit

}); // end ready

In addition, I added a div to display the error message and does not do so within the ul, because semantically have no sense, as it says @Karl Wills

<div id="error"></div>
<ul id="photos">

</ul>
james rochabrun
PLUS
james rochabrun
Courses Plus Student 22,726 Points
james rochabrun
james rochabrun
Courses Plus Student 22,726 Points

awesome man, i was trying with the .fail() but i thionk that it doesnt work with getjson()

Karl Wills
Karl Wills
4,110 Points
Karl Wills
Karl Wills
4,110 Points

Looks good to me, only issue I see is that #photos is an unordered list and you're populating it without a list item to display your error message. I don't know how significant this is in the grand scheme of things, just something I noticed

Nicole Chinn
Nicole Chinn
8,122 Points
Nicole Chinn
Nicole Chinn
8,122 Points

Looks good! I've learned a new function too~ The only thing would be that you could place this repeated code after the if else statement to keep it DRY

$('#search').prop("disabled", false); $('#submit').prop("disabled", false).val("Search");

Ross Alejandro Bendal
Ross Alejandro Bendal
8,993 Points
Ross Alejandro Bendal
Ross Alejandro Bendal
8,993 Points

Thank you for this!