[jQuery] question about getJSON, objects and/or scope - confused
Hi, I'm working on a page where graphics/content get loaded via server
side stuff and decided to try to use JSON to send the data.
But I'm having trouble with converting the JSON to a javascript object
when I use an external file.
This works:
http://dev.illovich.com/storigraphi5.html
==========
script type="text/javascript"> // this tests the JSON object
var thisStory = {
"imgURL": "storigraphs/test1.jpg",
"title" : "I (verbed) you",
"author" : "The Author",
"imgHeight": 604,
"imgHeight": 453,
"frameTotal" : 4,
"frames": {
'frame1' : '-0px -0px',
'frame2' : '-225px -0px',
'frame3' : '-0px -302px',
'frame4' : '-225px -302px'
},
"texts": {
'frame1' : 'I saw you',
'frame2' : 'I wanted you',
'frame3' : 'I craved you',
'frame4' : 'I knew you'
},
}
</script>
<script type="text/
javascript">
$(document).ready(function(){
$('.frame').click(function(){
var frameNum = $(this).attr("name");
var frameBgPos = thisStory.frames[frameNum];
var frameTxt = thisStory.texts[frameNum];
$('#story').animate({ opacity: 'hide'}, 'fast').queue(function()
{
$(this).css('background-position' , frameBgPos)
$(this).dequeue();
}).animate({ opacity: 'show'}, 'fast');
$('#word1').animate({ opacity: 'hide'}, 'fast').queue(function
(){
$(this).text(frameTxt);
$(this).dequeue();
}).animate({ opacity: 'show'}, 'fast');
});
});
</script>
===============
But the below code doesn't - it definitely loads the external JSON
file (javascript/test.js for now - it will be server generated later)
because the alert function call in the thisStory = $.getJSON(blah
blah) section works, but the var thisStory is either not getting
filled with the data that is being loaded by the getJSON method (my
suspicion) or the $('.frame').click(function(thisStory) function
doesn't have access to the contents of the var thisStory because of
scope.
http://dev.illovich.com/storigraphi6.html
======JSON file=====
{
"imgURL": "storigraphs/test1.jpg",
"title" : "I (verbed) you",
"author" : "Peter Hanley",
"imgHeight": 604,
"imgHeight": 453,
"frameTotal" : 4,
"frames": {
'frame1' : '-0px -0px',
'frame2' : '-225px -0px',
'frame3' : '-0px -302px',
'frame4' : '-225px -302px'
},
"texts": {
'frame1' : 'I saw you',
'frame2' : 'I wanted you',
'frame3' : 'I craved you',
'frame4' : 'I knew you'
},
}
======end JSON file===========
======script=================
$(document).ready(function(){
var thisStory = $.getJSON("javascript/test.js", function(json){
alert("title: " + json.title + '\n'+
"author: " + json.author + '\n' +
"frame3 : " + json.frames.frame3 + ' ' +
json.texts.frame3 + '\n' +
"imgurl: " + json.imgURL + '\n');
});
$('.frame').click(function(){
var frameNum = $(this).attr("name");
var frameBgPos = thisStory.frames[frameNum];
var frameTxt = thisStory.texts[frameNum];
$('#story').animate({ opacity: 'hide'}, 'fast').queue(function()
{
$(this).css('background-position' , frameBgPos)
$(this).dequeue();
}).animate({ opacity: 'show'}, 'fast');
$('#word1').animate({ opacity: 'hide'}, 'fast').queue(function
(){
$(this).text(frameTxt);
$(this).dequeue();
}).animate({ opacity: 'show'}, 'fast');
});
});
</script>
and later in the body there's a
document.write('<i>' + thisStory.title + '</i>' + ' by ' +
thisStory.author + '
');
that doesn't even execute. Can anyone see what I'm doing wrong?
Thanks.