Question

I am reading an rss file with jquery ajax function in the success i create the array function mycarousel_itemList and fill it with items using push. I want to use this array in a function that I created then, but I get the error:

mycarousel_itemList is not defined

What’s going wrong?

<script type="text/javascript">
var rss = 'http://search.issuu.com/userxxx/docs/recent.rss';
$.ajax({
type: 'GET',
url: 'js/issuuGallery/proxy.php?url='+rss,
dataType: 'xml',
success: function(xml) {
    var ul = document.createElement("ul");
    ul.setAttribute('id', 'issuu-gallery');
    ul.setAttribute('class', 'overview');

    $(xml).find('item').each(function(){
        var mycarousel_itemList = [];
        var id = $(this).find('[name="documentId"]').attr('value');
        var src = 'http://image.issuu.com/'+id+'/jpg/page_1_thumb_small.jpg';
        mycarousel_itemList.push(src);
        console.log(mycarousel_itemList);
    });
}
});
function mycarousel_itemLoadCallback(carousel, state)
{

for (var i = carousel.first; i <= carousel.last; i++) {
    if (carousel.has(i)) {
        continue;
    }

    if (i > mycarousel_itemList.length) {
        break;
    }

    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
   };

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />';
};

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
    size: mycarousel_itemList.length,
    itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
});

Answer 1

I’m assuming you’re just loading the rss feed once then creating a carousel with the result. If so, this is easy to fix.

1. Look for this line:

   var mycarousel_itemList = [];
   

   That is creating a local variable inside the ajax success callback. What you’ll want to do is make it global and move it to the top (make it the very first line inside the < script> tag).

2. Move the $.ajax call to inside the document ready callback.

3. Find the following jcarousel code:

   jQuery('#mycarousel').jcarousel({
       size: mycarousel_itemList.length,
       itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
   });
   

   Move it to inside the $.ajax callback as the last thing in the callback.

Your final code should look like this: http://jsfiddle.net/h35VQ/