JCarousel and JqueryUI slider issue - jquery-plugins

Question

Hi I'm very new to javascript and Jquery. I found the Jcarousel plugin recently and I've tried several of the examples on sorgalla, but can't seem to figure it out.
What i want is to populate the carousel with images(links) from a database, the selection of images i want to display are based on 2 date parameters i get from a jqueryui slider. My idea was to do a ajax request with the "from" and "to" date parameters to a python script which returns the image links in JSON format. But my problem is that when I select a new range of images from the slider the carousel goes bananas(displaying empty boxes or half images).
I would appreciate if someone could nudge me in the right direction here, thanks.
Here's my script:
<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

Found a solution:
I can't just empty my ul for some reason, but a fix is to place your ul in a wrapper and destroy that wrapper and remake the ul between each imageset. Probably not the sexiest solution but it works..
solution:
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});
}
);
}