fluffyside fluffyside - 3 months ago 121
jQuery Question

owl carousel, ajax load

I'm creating a page that loads external content via ajax.

$(".link").click(function(e) {
e.preventDefault()
$("#ajax-container")load("external-file.php");
});


This works but the content in the external files contain a Owl Carousel, which appear in the loaded html, but do not (re)initialise.

According to the Owl docs, and the simialr post here (How to reinitialize Owl Carousel after ajax call) I need to destroy and then reinitiate the carousel.
This works perfectly when attached to an independant click.

$(".button").click(function(e){
e.preventDefault()
$("#carousel").data('owlCarousel').destroy();
$("#carousel").owlCarousel();
});


but I need this to happen without an additional click once the ajax file has loaded. I have tried all of the following methods with no luck.

// adding to original
$(".link").click(function(e){
e.preventDefault()
$("#ajax-container")load("external-file.php");
$("#carousel").data('owlCarousel').destroy();
$("#carousel").owlCarousel();
});

// in addition to original
$(".link-second-classname").click(function(e) {
e.preventDefault()
$("#carousel").data('owlCarousel').destroy();
$("#carousel").owlCarousel();
});

// ajaxComplete
$(document).ajaxComplete(function(e){
e.preventDefault()
$("#carousel").data('owlCarousel').destroy();
$("#carousel").owlCarousel();
});

// ajaxSuccess
$(document).ajaxSuccess(function(e){
e.preventDefault()
$("#carousel").data('owlCarousel').destroy();
$("#carousel").owlCarousel();
});


Any help or suggestions would be massively appreciated.

Thanks.

Answer

You should be able to initialize the carousel using the callback parameter of the jquery load method.

$(".link").click(function(e) {
    e.preventDefault();
    $("#ajax-container").load("external-file.php", function() {
        $("#carousel").owlCarousel();
    });
});
Comments