Problems writing list items to jcarousel

[Piggo]

I'm using AJAX, javascript and PHP to make calls and receive data back that I then want to display on a web page. My calls are working fine and I am receiving data back, my problem lies with trying to write the data to a jCarousel.

Whatever I do I can't appear to write to the jcarousel list items from my javascript. My javascript is in a separate .js file.

I've tried all sorts of combinations this is my latest:

.JS FILE within my handleResponse function:

var ul = document.getElementById("testerid");
ul.style.display = 'block';
var li = document.createElement("li");
var litext = document.createTextNode("test");
li.appendChild(litext);
ul.appendChild(li);

.php FILE:
<ul class="carels jcarousel-skin-tango" id="testerid" >
</ul>


In my HEADER:
<script>
$(document).ready(function() {

$('.carels').jcarousel({
vertical: true
});
});
</script>

Result combinations I've had:

With the combination of code above I appear to get a functioning carousel - the arrows are there and are clickable and there is a boxed area between them, but no list items are visible on the page. If I include a <li></li> tag within the <ul> tag on my php page I get a visible list but the carousel doesn't function.

Thanks for any help anyone can give.

[Piggo]

In response to this I've now realised jCarousel works slightly different for dynamic loading. Hence the following changes:

HEADER:
$('.carels').jcarousel({
vertical: true,
itemLoadCallback: itemLoadCallbackFunction();
});

The itemLoadCallbackFunction takes two parameters the docs say - the requesting carousel and a flag which indicates the current state of the carousel.

So I have a function:

function itemLoadCallbackFunction(carousel,state) {

for (var i = carousel.first; i <= carousel.last; i++) {
alert('here' + carousel);
// Check if the item already exists
if (!carousel.has(i)) {
carousel.add(i, "I'm item #" + i);
}
}
}

But:
1stly: Am not sure where this should be in my HEADER or in my .js file.
2ndly: How do I call this function from my .js file. I have half a dozen carousels in the page all with different ids.

Thanks for any guidance.

[Fotiman]

There is an example [sorgalla.com] at the jCarousel [sorgalla.com] website.

Some things I notice in your example:

$('.carels').jcarousel({
vertical: true,
itemLoadCallback: itemLoadCallbackFunction();
});

Note, in your example you would actually be calling the itemLoadCallbackFunction at creation time (because you put parenthesis after it). That's not what you want. Also, that semi colon is invalid there. The examples on the site look more like this:

$('.carels').jcarousel({
vertical: true,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});


Also, you don't call the itemLoadCallbackFunction directly. It's something the carousel calls under the covers. In the examples on the site, this is used to dynamically load a bunch of items at once. In your case, the important piece of information is this:

carousel.add(i, "item text");

i is the location within the carousel that you want to insert to, and the text is what you want to insert. The thing I'm not sure of is whether the size configuration property needs to be set, and whether or not it can be changed after instantiating the carousel.

[Piggo]

Thanks for that. I've now realised it's trickier than I thought with dynamically populating mulitple carolusels on one page. Based on this I've gone back to basics following your reply.

I have a single fixed carousel dynamically populating now with the static test data from the wesbite, but the problem is I want to populate it with data back from my AJAX call. Here's my order:

-The page loads
-The AJAX calls go off
-The data gets returned after several seconds delay
-I then need to populate the carousels with some of the data using javascript

It seems to me that the population of the carousels needs to be triggered by my handleResponse function that gets called when the AJAX requests completes successfully. Other than that the carousels need to listen for a response before being populated?

I'm still working on this, any help appreciated.

[Fotiman]

I think you are correct. The best way to do this would be event driven, creating the carousel when the response comes back from your AJAX call. So in your handleResponse function, that's where you're put the code to create the carousel.

[Piggo]

I agree. I've concluded I need to somehow add to the carousel from my handleResponse function, and am having trouble figuring out how to do this.

From what I can tell the jcarousel itemLoadCallback seems only to get called on intialisation, is that right? As I can't find a way of changing the contents of the carousel except when its initialised.

A second problem is that my data then comes back in several stages from multiple AJAX requests (so there is a small time delay). I need to add to the carousel as each set of data is returned.

[Fotiman]

A second problem is that my data then comes back in several stages from multiple AJAX requests (so there is a small time delay). I need to add to the carousel as each set of data is returned.

That is a problem. Do you know when exactly you've got all of the data? Because I think you'll need to create the carousel only once you've got all of the data. Alternatively, if you know how many values will be returned, I think you can create it initially and the items can get added to it asynchronously later.

[Piggo]

Thanks. I don't know when all the data will be back or how many items will be returned, but it's definitely worth considering creating the carousel after all the data list items have been written to the screen effectively. I'll look into this to see how it might work.

Basically then I'm looking at, performing my AJAX requests, getting the responses, writing each response to the screen. Then when everything has been returned creating & populating the carousels.

[Piggo]

So far I've got my data being dynamically populated into lists on my page. Now I need to create the carousel instances.

My question is when this is complete how do I go about creating/populating the jCarousels for each list on the page? I'm confused partly becasue I don't know how to create a jCarousel once the page has been loaded. When my data was static I ceated the carousels in the $(document).ready(function() section and merely referred to the class in the list.

I'm having trouble figuring out the best method to do this so any advice greatly appreciated, thanks

[Fotiman]

The trick is that you really need to know when you've gotten all of the responses back from the server. So if you make 3 requests to the server, then you'll need to keep track of that and after the 3rd response, create the carousel. For example:

var totalRequests = 3,
  totalResponses = 0;
xhr.onreadystatechange = function() }
  totalResponses++;
  if (totalResponses == totalRequests) {
    // Create carousel
  }
}
...
xhr.send();
...
xhr.send();
...
xhr.send();

Something along those lines.

[Piggo]

Just a quick update. I now know when all my responses are back from my requests, but am having trouble getting the carousels initialised & populated. 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 (k = 0; k < lengthofList; k++) {
datatoAdd = mylistElement[k].innerHTML;
carouseltoaddTo.add(k, 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 anyone.

[Piggo]

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.

Thanks Fotiman for your help on this topic.

[Fotiman]

Glad you got it sorted. :)