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

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

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

james rochabrun
PRO
james rochabrun
Pro 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

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

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");

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>

Thank you for this!