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>
  <meta charset="utf-8">
  <title>AJAX Flickr Photo Search</title>
  <link href='' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <script src=""></script>
  <script src="js/flickr.js"></script>
  <script src="js/app.js"></script>  
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Flickr Photo Search</h1>
              <label for="search">Type a search term</label>
              <input type="search" name="search" id="search">
              <input type="submit" value="Search" id="submit">


        <ul id="photos">



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

   searchTerms.prop("disabled", true);
   subButton.attr("disabled", true);
    // the AJAX part
    var flickerAPI = "";
    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="' + + '" class="image">';
        photoHTML += '<img src="' + + '"></a></li>';
      }); // end each
      photoHTML += '</ul>';
      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 ( < :