JCarousel и JQueryUI slider issue

Question

Привет, я очень новичок в javascript и JQuery. Недавно я нашел плагин Jcarousel, и я попробовал несколько примеров на sorgalla, но, похоже, не понял его.

Что я хочу, это заполнить карусель изображениями (ссылками) из базы данных, выбор изображений, которые я хочу отобразить, основан на 2 параметрах даты, которые я получаю с ползунка jqueryui. Моя идея состояла в том, чтобы выполнить запрос ajax с параметрами даты «от» и «до» к сценарию python, который возвращает ссылки изображения в формате JSON. Но моя проблема в том, что когда я выбираю новый диапазон изображений с ползунка, карусель выходит из бананов (отображает пустые поля или половинные изображения).

Буду признателен, если кто-то может подтолкнуть меня в правильном направлении здесь, спасибо. Вот мой сценарий:

<script type="text/javascript"> 

function js(){ 
    $('#mycarousel').empty(); 
    var start_d=$("#valueAA").val(); 
    var end_d=$("#valueBB").val(); 
    $.getJSON("http://www.xxx.com/zzzzzzzzz/cgi-bin/hnf.py"  , 
     {start_d: start_d, end_d: end_d}        , 
     function(data){ 
      var encoded = $.toJSON(data); 
      for(var i=0; i < data.articles.length; i++) { 
       $('#mycarousel').append('<li><img src="' + $.evalJSON(encoded).articles[i].img + '" width="120" height="100" alt="" /></li>'); 
      } 
      jQuery('#mycarousel').jcarousel({scroll: 1}); 
     } 
    ); 
} 

$(document).ready(function() { 
    $(function(){ 
     $('select#valueAA, select#valueBB').selectToUISlider({ 
      sliderOptions: { 
       stop: function(e,ui) { 
        js(); 
       } 
      } 
     }); 
     labels: 12 
     //fix color 
     fixToolTipColor(); 
    }); 

    //quick function for tooltip color match 
    function fixToolTipColor(){ 
     //grab the bg color from the tooltip content - set top border of pointer to same 
     $('.ui-tooltip-pointer-down-inner').each(function(){ 
      var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth'); 
      var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor') 
      $(this).css('border-top', bWidth+' solid '+bColor); 
     }); 
    } 
}); 
</script> 

Answer 1

Найдено решение:

Я не могу просто опустошить мой ул по какой-то причине, но исправить это поместить ул в обертку и уничтожить эту обертку и переделать ul между каждым набором изображений. Наверное, не самое сексуальное решение, но оно работает ..

решение:

function js(){ 
    $('#wrap').remove(); 
    $('#container').append('<div id ="wrap"></div>'); 
    $('#wrap').append('<ul id="mycarousel" class="jcarousel-skin-tango"></ul>'); 
    var start_d=$("#valueAA").val(); 
    var end_d=$("#valueBB").val(); 
    $.getJSON("http://www.xxx.com/zzz/cgi-bin/hnf.py"  , 
     {start_d: start_d, end_d: end_d}        , 
     function(data){ 
      var encoded = $.toJSON(data); 
      for(var i=0; i < data.articles.length; i++) { 
       $('#mycarousel').append('<li><img src="' + $.evalJSON(encoded).articles[i].img + '" width="110" height="100" alt="" /></li>'); 
      } 
      jQuery('#mycarousel').jcarousel({scroll: 1}); 
     } 
    ); 
}