For some reason, jQuery won't work with JSON in my example.
Here's my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSON testing</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body>
<div>
<a href=#><img src="images/thumb1.jpg" /></a>
<a href=#><img src="images/thumb2.jpg" /></a>
<a href=#><img src="images/thumb3.jpg" /></a>
<a href=#><img src="images/thumb4.jpg" /></a>
<a href=#><img src="images/thumb5.jpg" /></a>
<a href=#><img src="images/thumb6.jpg" /></a>
<a href=#><img src="images/thumb7.jpg" /></a>
<a href=#><img src="images/thumb8.jpg" /></a>
<a href=#><img src="images/thumb9.jpg" /></a>
<a href=#><img src="images/thumb10.jpg" /></a>
</div>
</body>
</html>
JSON:
{
"slike": [
{
"info": "Maslacak i oblaci",
"detail": "Veliki Maslacak",
"sr": "images/1.jpg",
"t_sr": "images/thumb1.jpg"
}, {
"info": "Oblaci",
"detail": "Lepi Oblaci",
"sr": "images/2.jpg",
"t_sr": "images/thumb2.jpg"
}, {
"info": "Prasuma",
"detail": "Zelena Prasuma",
"sr": "images/3.jpg",
"t_sr": "images/thumb3.jpg"
}, {
"info": "Ptica",
"detail": "Plava Ptica",
"sr": "images/4.jpg",
"t_sr": "images/thumb4.jpg"
}, {
"info": "Jezero",
"detail": "Mirno Jezero",
"sr": "images/5.jpg",
"t_sr": "images/thumb5.jpg"
}, {
"info": "Klas Zita",
"detail": "Dva Klasa Zita",
"sr": "images/6.jpg",
"t_sr": "images/thumb6.jpg"
}, {
"info": "Stonehenge?",
"detail": "Lici Ali Nije Stonehenge",
"sr": "images/7.jpg",
"t_sr": "images/thumb7.jpg"
}, {
"info": "Zeleni Klas Zita",
"detail": "Ovaj Klas Je Zelen",
"sr": "images/8.jpg",
"t_sr": "images/thumb8.jpg"
}, {
"info": "Jos Jedna Ptica",
"detail": "I Ova Ptica Je Plava",
"sr": "images/9.jpg",
"t_sr": "images/thumb9.jpg"
}, {
"info": "Lijane?",
"detail": "Mozda Nisu Lijane?",
"sr": "images/10.jpg",
"t_sr": "images/thumb10.jpg"
}
]
}
and jQuery:
$(document).ready(function() {
$("img").click(function(){
x=$(this).attr('src');
$.getJSON('baza.json',function(json){
$.each(json.slike, function(i,v) {
if (v.sr == x) {
alert(v.t_sr);
}
});
});
});
});
So what's the problem? Well, jQuery works like a charm unless I add the code after $.getJSON('baza.json',function(json){. I'm guessing that I'm doing something wrong here, so can anybody help me up a bit?
