Destroy/Reload bxSlider between AJAX calls?

Question

I have my start page which has a bxSlider (full-width layout) and a wrapper around this element.

However when I click to go onto another page via ajax, I have a javascript action that will reload the slider wrapper content since I change from a "1 slider full-width layout" to "2 sliders with half-width layout"

Therefore in total there are 3 sliders, but if you load the start page directly, you see only 1. If you load another page directly (without ajax), you see the other 2 sliders.

I initialize the sliders like this:

banner1 = $('#page_banner1').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 540,
    responsive: true,
    speed: 700,
    pause: 7500,
    auto: true
});

banner2 = $('#page_banner2').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 540,
    responsive: true,
    speed: 700,
    pause: 9500,
    auto: true
});

banner_full = $('#page_banner_full').show().bxSlider({
    mode: 'fade',
    controls: false,
    pager: false,
    caption: false,
    slideWidth: 1080,
    responsive: true,
    speed: 700,
    pause: 7500,
    auto: true
});

So for example, on one of the pages (not start page), then banner1 and banner2 are bxSliders but banner_full returns NULL:

<div id="banner_wrapper" class="page_block">

    <div id="page_banner1" class="page_slider" style="display: none;">
        <div id="banner1_0">
            <img id="img_0" src="cats.png" border="0">
        </div>
        <div id="banner1_1">
            <img id="img_1" src="dogs.png" border="0">
        </div>
        <div id="banner1_2">
            <img id="img_2" src="fish.png" border="0">
        </div>
    </div>

    <div id="page_banner2" class="page_slider" style="display: none;">
        <div id="banner2_0">
            <img id="img_0" src="banana.png" border="0">
        </div>
        <div id="banner2_1">
            <img id="img_1" src="orange.png" border="0">
        </div>
        <div id="banner2_2">
            <img id="img_2" src="apple.png" border="0">
        </div>
    </div>

</div>

I guess I need to branch my initialization code out and into functions? But unsure on the best way to approach re-creating that into a function that I can easily call (where I would check if typeof slider !== 'undefined' then reload/destroy else run initialize code).

I know that bxSlider supports loading dynamic content... except I'm actually changing the full content $('#banner_wrapper').html(data); as I use different options for the sliders (width etc.).

Here's the HTML of what the full slider looks like:

<div id="banner_wrapper" class="page_block">

    <div id="page_banner_full" class="page_slider" style="display: none;">
        <div id="banner_full_0">
            <img id="img_0" src="football.png" border="0">
        </div>
        <div id="banner_full_1">
            <img id="img_1" src="rugby.png" border="0">
        </div>
        <div id="banner_full_2">
            <img id="img_2" src="basketball.png" border="0">
        </div>
    </div>

</div>

EDIT:

Ok here's what I've done to branch the initialize bxSlider code out into a function:

global_product.prototype.slider = function(elem, type, pause_time) {
    var slider_elem = $(elem);

    if(typeof(slider_elem) === 'undefined') {
        return false;
    }

    slider_elem.show();

    if(typeof(slider_elem.getSlideCount) !== 'function') {
        if(type === 'large') {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 1080,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        } else {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 540,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        }

        return slider_elem;
    } else {
        slider_elem.destroySlider();
    }

    return false;
};

global_product.prototype.sliderDestroy = function(elem) {
    var destroy_elem = $(elem);

    if(typeof(destroy_elem) === 'undefined') {
        return false;
    }

    if(typeof(destroy_elem.destroySlider) === 'function') {
        destroy_elem.destroySlider();
    }
};

global_product.prototype.reloadSlider = function(elem) {
    var reload_elem = $(elem);

    if(typeof(reload_elem) === 'undefined') {
        return false;
    }

    if(typeof(reload_elem.reloadSlider) === 'function') {
        reload_elem.reloadSlider();
    }
};

Which works with:

global_product.prototype.slider_ajax = function(page) {

    banner1 = this.sliderDestroy('#page_banner1');
    banner2 = this.sliderDestroy('#page_banner2');
    banner_full = this.sliderDestroy('#page_banner_full');

    $.ajax({
        async: true,
        type: 'GET',
        url: page,
        success: $.proxy(function(data)
        {
            $('#partners').html(data);

            banner_banner1 = this.slider('#page_banner1', '', 7500);
            banner_banner2 = this.slider('#page_banner2', '', 9500);
            banner_full = this.slider('#page_banner_full', 'large', 7500);


        }, this)
    });

    this.reloadSlider('#page_banner1');
    this.reloadSlider('#page_banner2');
    this.reloadSlider('#page_banner_full');
};

But I haven't been able to destroy the slider 'straight away'? It seems it waits until bxSlider finishes first before destroying it and loading the other one?

I guess I should be using 'this' instead of 'product' inside the prototype functions, but I don't think that's the real reason why things aren't working correctly? -> hmm this seems not to work - 'this' is not defined

Any ideas? right now the slider on start page works, then I click and load another page and the DOM shows the two sliders, which seem to have been initialized as bxSliders but they haven't started and they don't show up as visible?

Ahhh so I did have to fix my 'product' var calls to 'this' inside the prototype. Code updated and works well now...

Answer 1

I fixed my code in my EDIT, but here's the copy of it:

I made a function to initialize the slider, another to try and destroy the slider, another for reloading the slider. Then in my JS function, I just destroy, init, reload to make sure it's all working... this could probably be refactored a lot more than what I have right now but it seems to work well for me:

global_product.prototype.slider = function(elem, type, pause_time) {
    var slider_elem = $(elem);

    if(typeof(slider_elem) === 'undefined') {
        return false;
    }

    slider_elem.show();

    if(typeof(slider_elem.getSlideCount) !== 'function') {
        if(type === 'large') {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 1080,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        } else {
            slider_elem.bxSlider({
                mode: 'fade',
                controls: false,
                pager: false,
                caption: false,
                slideWidth: 540,
                responsive: true,
                speed: 700,
                pause: pause_time,
                auto: true
            });
        }

        return slider_elem;
    } else {
        slider_elem.destroySlider();
    }

    return false;
};

global_product.prototype.sliderDestroy = function(elem) {
    var destroy_elem = $(elem);

    if(typeof(destroy_elem) === 'undefined') {
        return false;
    }

    if(typeof(destroy_elem.destroySlider) === 'function') {
        destroy_elem.destroySlider();
    }
};

global_product.prototype.reloadSlider = function(elem) {
    var reload_elem = $(elem);

    if(typeof(reload_elem) === 'undefined') {
        return false;
    }

    if(typeof(reload_elem.reloadSlider) === 'function') {
        reload_elem.reloadSlider();
    }
};

Which works with:

global_product.prototype.slider_ajax = function(page) {

    banner1 = this.sliderDestroy('#page_banner1');
    banner2 = this.sliderDestroy('#page_banner2');
    banner_full = this.sliderDestroy('#page_banner_full');

    $.ajax({
        async: true,
        type: 'GET',
        url: page,
        success: $.proxy(function(data)
        {
            $('#partners').html(data);

            banner_banner1 = this.slider('#page_banner1', '', 7500);
            banner_banner2 = this.slider('#page_banner2', '', 9500);
            banner_full = this.slider('#page_banner_full', 'large', 7500);


        }, this)
    });

    this.reloadSlider('#page_banner1');
    this.reloadSlider('#page_banner2');
    this.reloadSlider('#page_banner_full');
};