[support] refreshing jcarousel item list without page reload

[Christopher M. Jones]

I'm headed off to dinner, now. So probably my last email of the day. 
This has turned into quite the saga, hasn't it?

I understand your frustration. I've been there myself. I can see you're 
reading the examples. I didn't know if maybe you hadn't read the one on 
external controls. The answers are all there. But I remember when it was 
greek to me, too, and I just wished that someone would tell me what to 
do. To some extent, this is how you earn your chops. So you have my 
kudos for soldiering through.

That said, here's what you need to do. This is quick, and sketchy.

Drupal.behaviors.mymodule = function (context) {

   // Initialize jcarousel
   var carousel = $("#profile-carousel").jcarouse({
     itemLoadCallback: mycarousel_itemLoadCallback,
     vertical: true
   }

   // Now that the carousel is initialized and loaded, bind the
   // a function to the select element.

   $("#award-type-filter").change(function(){

     // Get the carousel. This is in the docs, but it's never
     // worked for me. If it doesn't work for you then I'm pretty
     // sure you can just use the var you set above. It should still
     // have scope here

     // var carousel = jQuery('#profile-carousel').data('jcarousel');

     // There is a method in there to clear the carousel of all its
     // its items. It may be .clear(). You can console.log(carousel)
     // above to inspect the methods there, or you can examine the
     // jcarousel js file to find it there. Anyway, clear it here.

     carousel.clear();

     // Now get the new items. This is your ajax stuff, and duplicates
     // some of what would be in your itemLoad callback. You can refactor
     // this duplicated code into a utility function, and call that
     // function both here and in your itemLoad callback.

     var xml = $.get('/classification/' + $(this).val(), function(){
       // Assuming xml is an array of items to add...
       $.each(xml, function(i, item){
         carousel.add(i+1, item); // i in the function is an index,
                                  // counting from 0. but jcarousel
                                  // counts from 1. Grrr.
       });

       // Now that the carousel is wiped and repopulated we can reload it
       // to make things actually happen on the screen.

       carousel.reload();

       // You may need to send the user back to the beginning.

       carousel.scroll(carousel.first);
     });

   });

}

You didn't copy over mycarousel_itemAddCallback. Whatever it does, you 
can probably just use it right there where I had the ajax stuff. The 
trick is to clear the carousel, then reload it using carousel.reload(); 
Use lots of console.log() calls on the variables and the objects you are 
using. If you console.log() the carousel object itself, you can see lots 
of cool methods for controling the carousel from your code. Just don't 
forget: if console is not open then console.log will generate errors. 
You can think your code is failing when it's not.

What I meant before by trying to rewrite the whole carousel is that it 
looked like your onchange event was triggering a function called 
trigger(). But trigger was just calling carousel(). Which is the 
function that selects an element in the dom and initializes the 
carousel. You should be doing that only once. Thereafter, you are 
loading and unloading items against an already initialized carousel.

I really really hope this helps. More than this I cannot do, apart from 
writing it for you. Let us know how it turns out. And hey. This stuff is 
hard. You have to crack your head on it. The last time I did a major 
project with jcarousel I thought I was going to rip my machine from the 
wall, tie the cable around my neck, and throw the thing out of the window.

See http://c-sgroup.com


On 11/18/2010 05:23 PM, Aldo Martinez Selleras wrote:
> I have the examples, all of them, and I have looked all very slowly, but
> there is no one example like I want :( yours emails I readed slowly too
>
> It's working, just no is it creating a new list of objects, only adding more
> of this.
>
> I don't want create the complete carousel, only need the list of items!
>
> Are you suggesting me in the onchange event only re-call the function it
> generate the list items????
>
> Sorry, but my English is not very good!
>
>