I'm a newbie programmer and i've been reading the Instagram search tutorial over at EduVoyage (http://eduvoyage.com/instagram-search-app.html). Impressed by this, i've decided to try my hand at it to learn jquery and such. Problem is, I cant get his example to work. I've dumbed my app down and can get it to display the default "cat" search, but when i search on the web form, i get nothing. No errors, no results, nothing. I'm banging my head here trying to find out what I'm doing incorrectly. i know its probably something simple im missing, but any help is greatly appreciated.
Here is js code:
var Instagram = {};
(function () {
function toScreen(photos) {
$.each(photos.data, function (index, photo) {
photo = "<div class='photo'>" +
"<a href='" + photo.link + "' target='_blank'>" +
"<img class='main' src='" + photo.images.low_resolution.url + "' width='250' height='250' />" +
"</a>" +
"<img class='avatar' width='40' height='40' src='" + photo.user.profile_picture + "' />" +
"<span class='heart'><strong>" + photo.likes.count + "</strong></span>" +
"</div>";
$('div#photos-wrap').prepend(photo);
});
}
function search(tag) {
var url = "https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&client_id=XXXXXXXXXXXXXXXXXX"
$.getJSON(url, toScreen);
}
$(function () {
$('form#search button').click(function () {
var tag = $('input.search-tag').val();
Instagram.search(tag);
});
Instagram.search('cats');
});
Instagram.search = search;
})();
and the HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' charset='utf-8'></script><script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script>
<link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='photos-wrap'>
<form id='search'>
<button type='submit' id='search-button' tabindex='2'>
<span class='button-content'>Search</span>
</button>
<div class='search-wrap'>
<input class='search-tag' type='text' tabindex='1' />
</div>
</form>
</div>
</body>
</html>