I'm trying to use jQuery to send an ajax request to a very simple PHP script to load images for the jQuery cycle plugin. I'm having an issue with obtaining the image source strings from my json object. I'll show my code, then go into more detail below:
<!doctype html>
<html lang="en-us">
<head>
<title>jQuery Cycle test</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<style>
#slideshow a { margin: 0; padding: 0; color: #fff; }
</style>
</head>
<body>
<div id="slideshow">
</div>
</body>
<script type="text/javascript">
$.get('slideshow.php', {start : "true"}, function(data){
var images = JSON.parse(data);
for(var i = 1; i < 6; ++i){
var index = 'image' + i; alert(index); alert(images.index);
$('#slideshow').innerHTML += '<a href="images/' + images.index + '"><img src="images/' + images.index + '" alt="" /></a>';
}
});
$('#slideshow').cycle({
fx: 'cover',
direction: 'right',
timeout: 3000,
speed: 300
});
</script>
</html>
My PHP script returns a json_encoded associative array, which becomes a normal json object after the encoding. For my test, I have five images I'm trying to load: image1 - image5. As you can see in my JavaScript, I attempt to dynamically create a new index/property name to access these individual image source strings by appending the value of 'i' to the string 'image'. All straight forward.
My problem is that when I create my property names in this way, it returns 'undefined'. When I try it manually, by writing something like images.image3, it returns the proper source string.
I've alerted out my dynamic indexes (as you can see), and they look well-formed to me. I don't think it's a closure issue, as it would be returning the last image string in that case. I'm pretty stumped at this point, so any suggestions would be greatly appreciated.