JQuery | JCarousel - DIV don't refresh after each animation

JQuery | JCarousel - DIV don't refresh after each animation

Hi,

I'm unsing JQuery 1.8.1 and the plugin JCarousel. I've got the problem that the content isn't updated every time. I have 3 Divs that are animated in a JCarousel:

  1. <script type="text/javascript">
        $(document).ready(function() {
            $('#car').jcarousel({
              itemLoadCallback: calendar_itemLoadCallbackFunction,
              wrap: 'circular'
            });
        });
      </script>

    <ul id="car" class="jcarousel-skin-tango">
              <li>
                  <div id="entry_1_date" class="date".</div>
              </li>
              <li>
                  <div id="entry_2_date" class="date"></div>
              </li>
              <li>
                  <div id="entry_3_date" class="date"></div>
              </li>
            </ul>



















The animation works perfect. After that i wrote a callbackhandler in an external scriptfile. The handler initialize the first DIV with todays date and the others with the following date. The referenceDate of each block is the first DIV.

  1. //Globals
  2. //DayName in German
    dayName = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch","Donnerstag", "Freitag", "Samstag");
    referenceDate = new Date()

    //Callbackhandler
    function calendar_itemLoadCallbackFunction(carousel, state){
       
        switch(state){
            case 'init':
                calendar_init();
                break;
            case 'next':
                calendar_next();
                break;
            case 'prev':
                calendar_prev();
                break;
        }
    }

    //Function to initialize the calendar
    function calendar_init(){
       
        setCalendarDate( referenceDate );
    }

    //Function to step forward
    function calendar_next(){
       
        referenceDate.setDate( referenceDate.getDate() + 3 );
        setCalendarDate( referenceDate );
    }

    //Function to set backwards
    function calendar_prev(){
       
        referenceDate.setDate(referenceDate.getDate() - 3);
        setCalendarDate( referenceDate );
    }

    //Setter for Date
    function setCalendarDate(d){
        alert(referenceDate);
        for(i = 1; i <= 3; i++){
            $('#entry_' + i + '_date').text( dayName[d.getDay()] + " den " + $.format.date( d, "dd.MM.yyyy" ) );
            d.setDate( d.getDate() + 1 );
        }
        d.setDate( d.getDate() - 3 );
    }

















































The initialisation works fine. But when im rotating the carousel the div aren't updated every time. Especially after the initialisation and when you are changing from rotating next to prev there are these problems.

Example:
   Initialisation --> Div-Content: 02/12/2012   02/13/2012  02/14/2012 | Alert (02/12/2012)
Pressing next --> Div-Content: 02/12/2012   02/13/2012  02/14/2012 | Alert (02/15/2012)
Pressing next --> Div-Content: 02/12/2012   02/13/2012  02/14/2012 | Alert (02/18/2012)
Pressing next --> Div-Content: 02/21/2012   02/22/2012  02/23/2012 | Alert (02/21/2012)

What I'm doing wrong?

Greetz
noobstar