Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jeff Mauro
5,374 PointsAjax 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
wuworkshop
3,429 PointsAt 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');
Jeff Mauro
5,374 PointsIt worked! Thx ( < :