searchCallBack is not defined in Rotten Tomatoes API search - ajax

Question

I am trying to do a search on the Rotten Tomatoes website for their movies and when I try to type in 'TOY' I got a searchCallBack that is not defined the search should return movies that have the word Toy in them. I am completely new to AJAX by the way. I found that error in the developers tools console.
here is the code:
$(function () {
// You will need this API key in order to call the Rotten Tomatoes API.
var apiKey = *removed for security purposes;
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apiKey
document.getElementById('searchBox').addEventListener('keydown', function (event) {
if (event.which === 13 || event.keyCode === 13) {
var searchText = this.value;
$(document).ready(function () {
$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies.json", {
q: 'TODO put in search text',
page_limit: 10,
page: 1,
success: seachCallBack(),
dataType: 'jsonp'
});
});
// callback for when we get back the results
function searchCallback(data) {
var movies = data.movies;
$.each(movies, function (index, movie) {
$(document.body).append('<h1>' + movie.title + '</h1>');
$(document.body).append('<img src="' + movie.posters.thumbnail + '" />');
});
}
}
});
});

Answer 1

In your Ajax request callback, you have misspelled the function "seachCallBack." If you spell it correctly it should work. It should be "searchCallback"
$(function () {
var apiKey = "removed for security purposes";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apiKey
function keydownHandler(evt) {
if (event.which === 13 || event.keyCode === 13) {
var searchText = this.value;
$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies.json", {
q: search text,
page_limit: 10,
page: 1,
success: searchCallback,
dataType:"json"
});
}
}
// callback for when we get back the results
function searchCallback(data) {
var movies = data.movies;
$.each(movies, function (index, movie) {
$(document.body).append('<h1>' + movie.title + '</h1>');
$(document.body).append('<img src="' + movie.posters.thumbnail + '" />');
});
}
$('#searchBox').addEventListener('keydown', keydownHandler);
});