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

Leonard Morrison
PRO
Leonard Morrison
Pro Student 32,914 Points

Search function not working...

For some reason, when I reviewed the code for the challenge, I get nothing when I searched "Lions". Here's the code:

$(document).ready(function() {


 $('form').submit(function () {
//Select Form
   $('form').submit( function(evt)
    {
     evt.preventDefault();
     var $searchTerm = $('#search');
      // the AJAX part
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $(this).text();
    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);
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);

  });



    });


     // end click

}); // end ready
```javascript

1 Answer

Steven Parker
Steven Parker
182,438 Points

You have two nested event handlers. The outer one causes a page reload, so nothing else happens.

Try removing the line just before the "//Select form" comment, along with one of the lines with "});" near the end.

Then, you probably don't want to try to get a value using "this", since it represents the form itself. But you have already created a variable to reference the input element, so you could use that instead:

      var animal = $searchTerm.val();  // instead of: $(this).text();