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

Ajax Stage 4 Challenge

Hi. I am unable to get the Flickr photos to show up when I type "Lions" into the field and hit the Search button. I have tried debugging for quite awhile, but nothing works. Please review code and advise. Thank you. ( < :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX Flickr Photo Search</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/flickr.js"></script>
  <script src="js/app.js"></script>  
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Flickr Photo Search</h1>
            <form>
              <label for="search">Type a search term</label>
              <input type="search" name="search" id="search">
              <input type="submit" value="Search" id="submit">
            </form>

          </div>
        </div>

        <ul id="photos">

        </ul>
      </div>
    </div>
  </div>
</body>
</html>

flickr.js

$(document).ready(function() {
 $('form').submit(function (evt) {
    evt.preventDefault();
   var searchTerms = $('#search').val();
   var subButton = $('#submit').val ().val("searching...");

   searchTerms.prop("disabled", true);
   subButton.attr("disabled", true);
    // the AJAX part
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = searchTerms.val();
    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>';
      }); // end each
      photoHTML += '</ul>';
      $('#photos').html(photoHTML);
      searchTerms.prop("disabled", false);
      subButton.prop("disabled", false).val("Search");
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  }); // end click

}); // end ready

2 Answers

At the very top of your code, instead of this:

var searchTerms = $('#search').val();
var subButton = $('#submit').val ().val("searching...");

It should be this:

var searchTerms = $('#search');
var subButton = $('#submit');

It worked! Thx ( < :