apply an owl carousel on dynamic HTML from an ajax call

Question

I need to apply an owl carousel and all of it's CSS to dynamic HTML elements coming from an ajax call.

Currently, the code looks like this:

jQuery(function ($) {
    $('.entry-content').addClass('entry-content--quiz')
    $('.get-questions').on('click', function (e) {
        e.preventDefault();
        let url = $(this).attr('href');
            $.ajax({
                url: url,
            }).done(function (data) {
                $('.entry-content').html(data);
                $('#wpvq-page-0').owlCarousel({
                    items:1,
                    slideBy: 1,
                    stagePadding: 0,
                    nav: true,
                    dots: false,
                });
            }).fail(function (err) {
                console.log('ajax err back', err);
            });
        return false;
    });
});

This obviously does not work and throws "owl carousel is not a function" because it's not in the DOM on initial load. I need to somehow apply the carousel to a div that comes from data.

I found some relevant answers but they're not in the context of my situation:

Load dynamic content in Owl Carousel 2

How to re-render a owl-carousel item?

They look like they re-write the DOM but it doesn't make sense in the context of what I'm doing.

How do I put an owl carousel on a div inside HTML that comes from an ajax call?

EDIT 12/10/2018 FULL sample:

jQuery(function ($) {
    $('#link').on('click', function (e) {
        e.preventDefault();
        let url = $(this).attr('href');
            $.ajax({
                url: url,
            }).done(function (data) {
                $('#content').html(data);
                $('#carousel-section').addClass("owl-carousel");
                setTimeout(function() {
                    $('#carousel-section').owlCarousel({
                        items:1,
                        slideBy: 1,
                        stagePadding: 0,
                        nav: true,
                        dots: false,
                    });
                },1000)
            }).fail(function (err) {
                console.log('ajax err back', err);
            });
        return false;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<div id="content"></div>
<a id="link" href="http://silly-stallman-3e4b6f.netlify.com/index.html">Cclick</a>

I can't get the HTML to populate inside the DIV idk why it doesn't work but this is the example of what I'm doing - getting static HTML (http://silly-stallman-3e4b6f.netlify.com/index.html) and putting it into an ajax call, populating the page with it then needing to target the owl carousel to the dynamic HTML somehow. How do I do this?

@Toni Michel Caubet I've included a full sample but I can't get the HTML to populate idk why it doesn't work but you can see what I'm doing in context of the question. PUlling in HTML via AJAX, then neededing to hit the owl carousel on the dynamic HTML - http://silly-stallman-3e4b6f.netlify.com/index.html — kawnah, Dec 10 '18 at 15:55
I followed the steps of your code and apparently it is right, what is the error you are getting? Is it something related to CORS? — Giovan Cruz, Dec 10 '18 at 17:59

score 2 · Answer 1 · answered Dec 10 '18 at 15:27

I faced this problem before. I end up solving ajax to run asynchronously.
You might try something like this. Hope it will give you some ideas.

jQuery(function ($) {
    $('.entry-content').addClass('entry-content--quiz')
    $('.get-questions').on('click', function (e) {
        e.preventDefault();
        let url = $(this).attr('href');
        let result = undefined;
        
        $.ajaxSetup({ async: false });
        $.ajax({
            url: url,
        }).done(function (data) {
            result = data;
        }).fail(function (err) {
            console.log('ajax err back', err);
        });
        $.ajaxSetup({ async: true });
        
        // Check if result is assigned
        if (result) {
          $('.entry-content').html(result);
          $('#wpvq-page-0').addClass("owl-carousel");
          $('#wpvq-page-0').owlCarousel({
              items:1,
              slideBy: 1,
              stagePadding: 0,
              nav: true,
              dots: false,
          });   
        }
     
        return false;
    });
});

Good answer but does not work, sorry. Still trying to get a sample together to demonstrate. — kawnah, Dec 10 '18 at 15:40

score 2 · Answer 2 · answered Dec 10 '18 at 16:33

I have tried adding the owl-carousel dynamically and it seems to be working okay. Can you have a look at the code below and check if this can be of any help for your use case.

jQuery(function ($) {
            $('#link').on('click', function (e) {
                myReq.then( (res) =>{
                    res = res.map( item => `<div class='item'>${item}</div>`);
                    $('#content').html('<div id="carousel-section">'+res+'</div>');
                    $('#carousel-section').addClass("owl-carousel");
                    $('#carousel-section').owlCarousel({
                        items:1,
                        slideBy: 1,
                        stagePadding: 0,
                        nav: true,
                        dots: false,
                    });
                })
                .catch( (err) =>{
                    console.log('ajax err back', err);
                })
                return false;
            });
        });

        const myArray = [1, 2, 3, 4, 5];

        const myReq = new Promise( (resolve, reject) => {
            setTimeout( () => {
                resolve(myArray)
            }, 1000)
        })

.item {
    width: 300px;
    height: 300px;
    display: inline-flex;
    margin: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #009688;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
 <div id="content">

 </div>
 <a id="link" href="#">Cclick</a>

Okay. Interesting. That leads me to believe then this is possible and that something is wrong with my HTML call? Beyond stumped. — kawnah, Dec 10 '18 at 18:18

score 1 · Accepted Answer · answered Dec 10 '18 at 18:42

1

Ok, I got it. It was this:

I needed to change

jQuery(function ($) {

to

$(function ($) {

There was some sort of conflict going on.

answered Dec 10 '18 at 18:42

kawnah

3,204
8
53
103

apply an owl carousel on dynamic HTML from an ajax call

3 Answers3