I am trying to populate my HTML with jQuery from a JSON file I load with a getJSON call. Unfortunately, none of my jQuery seems to be working.
Here is my HTML:
<!doctype html>
<html>
<head>
<title>Lab 4</title>
<script type="text/javascript" src="resources/jquery-1.4.3.min.js"></script>
<script src="lab4.js"></script>
</head>
<body>
<div id="song-template">
<a id="site" href="#"><img id="coverart" src="images/noalbum.png"/></a>
<h1 id="title"></h1>
<h2 id="artist"></h2>
<h2 id="album"></h2>
<p id="date"></p>
<p id="genre"></p>
</div>
</body>
</html>
Some of my JSON file, in a subdirectory called resources:
[
{
"name" : "Short Skirt, Long Jacket",
"artist" : "Cake",
"album" : "Comfort Eagle",
"genre" : "Rock",
"year" : 2001,
"albumCoverURL" : "images/ComfortEagle.jpg",
"bandWebsiteURL" : "http://www.cakemusic.com"
}
]
And my JavaScript:
function updateHTML(result)
{
var templateNode = $("#song-template").clone(true);
$("#song-template").remove();
$.each(result, function(key, song)
{
var songNode = templateNode.clone(true);
songNode.children("#site").href(song.bandWebsiteURL);
songNode.children("#coverart").src(song.albumCoverURL);
songNode.children("#title").text(song.name);
songNode.children("#artist").text(song.artist);
songNode.children("#album").text(song.album);
songNode.children("#date").text(song.year);
songNode.children("#genre").text(song.genre);
$("body").append(songNode);
});
}
function loadJSON()
{
var result = $.getJSON("resources/lab4.json");
updateHTML(result)
}
$("#site").click(function()
{
loadJSON();
});
The issues so far are that: 1. My click listener on the site id doesn't work at all. I have also tried using coverart, and no dice. 2. When I explicitly call loadJSON(); and I walk through updateHTML in the debugger neither my clone or remove does anything, and my .each is just ignored. If anyone could point out what I'm doing wrong it would be greatly appreciated. I'm new to all this jquery and javascript stuff and don't really know what I'm doing.
Problem is in your loadJSON() method. getJSON doesn't return result of the call. Try this
function loadJSON()
{
$.getJSON("resources/lab4.json", updateHTML);
}
Also you should bind the event when DOM is prepared.
$(document).ready(function(){
$("#site").click(function()
{
loadJSON();
});
}})
You have to put your click listener in doc ready handler:
$(function(){
$("#site").click(function(){
loadJSON();
});
});