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

Wei Han Liu
Wei Han Liu
11,231 Points

AJAX Stage 4 Challenge Answer

I get this error after implementing
$searchTerm.prop("disabled",true); &
$submitButton.attr("disabled",true).val("searching...");

jquery-1.11.0.min.js:4 Uncaught RangeError: Maximum call stack size exceeded at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4) at Wc (jquery-1.11.0.min.js:4)

$(document).ready(function() {

$('form').submit( function(evt) {
    evt.preventDefault();
    var $searchTerm = $('#search');
    var $submitButton = $('#submit');

    $searchTerm.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 searchtag = $searchTerm.val();
    var flickrOptions = {
      tags: $searchTerm,
      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);
        $searchTerm.prop("disabled",false);
        $submitButton.attr("disabled",false).val("Search");         
    }
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);



});
}); // end ready

Please help me. Thanks ;)

1 Answer

Robert Leonardi
Robert Leonardi
17,151 Points

Hi Wei Han Liu

Check again your code, the AJAX part. It should be like this "var flickrOptions = { tags: searchtag, format: "json" }; " Best of luck