Проблема с ползунками JCarousel и JqueryUI

Question

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

Я хочу заполнить карусель изображениями (ссылками) из базы данных.выбор изображений, которые я хочу отобразить, основан на двух параметрах даты, которые я получаю с помощью ползунка jqueryui.Моя идея состояла в том, чтобы сделать ajax-запрос с параметрами даты from и to в скрипт 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 по какой-то причине, но исправление заключается в том, чтобы поместить ваш ul в обертку и уничтожить его, а также переделать 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});
        } 
    );
}