jQuery bxslider dynamic update not working

Question

I am having issues with dynamically updating content with bxslider. I am able to successfully load the content by entering the li items in HTML. When I attempt to append or replace the ul html with new li content from my database, it fails to reload the slider. Here is the important markups from my script. Is there any reason why I get no errors in the console.log and no images or slides?

var url = 'image/picture.jpg';
updateSlider('<li><img src=\''+url+'\'></li>');

var slider, sliderConfig = {
    pager: true,
    pagerType: 'short',
    auto: true,
    slideWidth: screen.width,
    onSliderLoad: function(){
    $('.bx-viewport').css({'height':'100% !important'});}}

$(function(){
    slider = $('.bxslider').bxSlider(sliderConfig);
});

function updateSlider(data){
   $('.bxslider').html(data);
   slider.reloadSlider(sliderConfig);
}

Answer 1

I found the answer, thank you for your suggestions.

The issue lies with the CSS. Once i reloaded the slider, the CSS was setting to 0 on the .bx-wrapper, .bx-viewport, .bxslider and .bxslider li elements. Once i reset them to the necessary heights it resolved my issue.

$(".bx-wrapper,.bx-viewport,.bxslider,.bxslider li").css("height",newHeight);

Answer 2

Try like this, means call the updateSlider('<li><img src=\''+url+'\'></li>'); only after you are having data using any delayed function like as ajax. I have put on document ready but you need to run after successful ajax request:

var url = 'image/picture.jpg';

var slider, sliderConfig = {
    pager: true,
    pagerType: 'short',
    auto: true,
    slideWidth: screen.width,
    onSliderLoad: function () {
        $('.bx-viewport').css({'height': '100% !important'});
    }
}

function updateSlider(data) {
    $('.bxslider').html(data);
}

$(function () {
    slider = $('.bxslider').bxSlider(sliderConfig);

    //update slider on load or after any ajax call success
    updateSlider('<li><img src=\'' + url + '\'></li>');
});

$('document').on('click', 'a', function () {
    slider.reloadSlider(sliderConfig);
});