I need to apply an owl carousel and all of it's CSS to dynamic HTML elements ing 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 es 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 es 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=".3.1/jquery.min.js"></script>
<script src=".3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href=".3.4/assets/owl.carousel.min.css">
<div id="content"></div>
<a id="link" href=".html">Cclick</a>

I need to apply an owl carousel and all of it's CSS to dynamic HTML elements ing 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 es 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 es 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<div id="content"></div>
<a id="link" href="http://silly-stallman-3e4b6flify./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-3e4b6flify./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?

• javascript
• jquery
• ajax
• owl-carousel

• Could we see it in action? ( via URL ) – Toni Michel Caubet Commented Dec 10, 2018 at 15:07
• I'm working on it hold on – kawnah Commented Dec 10, 2018 at 15:12
• @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 - silly-stallman-3e4b6flify./index.html – kawnah Commented Dec 10, 2018 at 15:55
• @kwanah I don't see any javascript in there – Toni Michel Caubet Commented Dec 10, 2018 at 16:37
• 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 Commented Dec 10, 2018 at 17:59

3 Answers 3

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;
    });
});

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

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

Ok, I got it. It was this:

I needed to change

jQuery(function ($) {

to

$(function ($) {

There was some sort of conflict going on.