Problems adding JCarousels to lists after the page has loaded

Question

I've got a page that loads and is then filled dynamically with several lists based on the results of several AJAX requests. I want to add a JCarousel to each of these lists after I have all the data back, and am having trouble getting this to work. I've tried several things now and still no luck. I currently have the following:

In my header:

$('.myindcaras').jcarousel({
    vertical: true
});

My PHP page which controls the displaying:

<ul id="uniqueid"></ul></div>

My .JS javascript file - trying to create/popualate carousels from in here:

In here I get the document.getElementById(uniqueid) and then I add the class info:

ul.className = "myindcaras jcarousel-skin-tango" 

to link it to the carousel data in my header.

After performing other tasks and all AJAX responses are complete I then attempt to create/add my carousels with this:

var mylistElement = document.getElementById('uniqueid').getElementsByTagName('li');
var lengthofList = mylistElement.length;
var carouseltoaddTo = '';
carouseltoaddTo = $('#uniqueid').data('jcarousel');         

if (lengthofList > 0) { 
    for (i = 0; i < lengthofList; i++) {                            
    datatoAdd = mylistElement[i].innerHTML;                     
    carouseltoaddTo.add(i, datatoAdd);                      
    }
}

From all of this I get the error: carouseltoaddTo is undefined

I think one problem is that I may not be initialising the carousels correctly in the first place. Secondly I'm not sure I'm referring to the carousel correctly to add all the list items to it.

Any help really appreciated, thanks.

Answer 1

I have now fixed this problem. I had taken things slightly too far! I've fixed it by simply moving my original carousel creation code from the header to my handleresponse function:

$('.myindcaras').jcarousel({
vertical: true
});

This is then executed when I have received all of my AJAX responses back.