Ajax call is not initializing owl carousel on second call?

Question

I'm trying to load data into owl carousel on each click request. It works fine on first call but when i second call it disturbs the owl carousel structure and shows the items vertically stacked!

No errors in console, ajax is getting data successfully but owl carousel isn't initializing. Slider Works fine on first ajax call but it doesn't work on second third and so on

Js Code:

$('.ajax-cate').click(function(e){
            e.preventDefault();
            $(this).style="border-bottom:1px solid #197B81";
            var _loader = '<div class="ajax-loader"><img src="/images/ajax-loader.gif"></div>';
            $('#videoList').empty().html(_loader);
            var cate_slug = $(this).attr('data-slug');
            params.cate_slug = cate_slug;
            ajaxLoadVideo(params);
        });


function ajaxLoadVideo(params)
        {
            $('#categoryDataList').show();
            $('#blogIndex').hide();
            $('#videoList').removeClass('blog-slider');
            $.ajax({
                url: '/api/test',
                method: 'GET',
                data: params,
                dataType: 'json',
                success: function(res) {
                    $('#categoryDataList .group-heading h3 a').empty().html(res.category.name);
                    $('#categoryDataList .group-desc').empty().html(res.category.desc);
                    var _listHTML = '';
                    videos = res.videos;
                    for (i = 0; i < videos.length; i++) {
                        _listHTML += '<div class="blog-item">';
                        _listHTML += '<div class="blog-image">';
                        _listHTML += '<a href="/blog/' + videos[i].slug + '" title="' + videos[i].video_title + '">';
                        _listHTML += '<img alt="' + videos[i].video_title + '" src="/uploads/thumbnail/320_' + videos[i].video_picture + '">';
                        _listHTML += '</a>';
                        _listHTML += '</div>';
                        _listHTML += '<div class="caption">';
                        _listHTML += '<a class="blog-list-video-title" href="/blog/' + videos[i].slug + '" title="' + videos[i].video_title + '">' + videos[i].video_title;
                        _listHTML += '</a>';
                        _listHTML += '</div>';
                        _listHTML += '<div class="blog-metas">';
                        _listHTML += '<span class="blog-views">' + addCommas(videos[i].video_koview) + ' views</span>';
                        _listHTML += '</div>';
                        _listHTML += '</div>';
                    }

                    $('#videoList').empty().html(_listHTML);

                    var owl = $("#videoList");
                    owl.owlCarousel({
                        loop:false,
                        navRewind:false,
                        margin:10,
                        nav:true,
                        dots:false,
                        navText: '',
                        responsive:{
                            0:{
                                items:1
                            },
                            600:{
                                items:3
                            },
                            1000:{
                                items:5
                            }
                        }
                    });
                    $('#videoList').addClass('blog-slider');

                }
            });
        }

HTML:

<a class="ajax-cate" data-slug="most-popular" href="/test/category/most-popular" title="">
  Most Popular
</a>

HTML where ajax data is populated/inserted:

<div class="blog-category-items" id="categoryDataList" style="display: none;">
    <div class="container">
        <div class="blog-groups">
            <div class="group-heading">
                <h3><a></a></h3>
            </div>
            <p class="group-desc"></p>

            <div class="owl-lg-dot mb-none owl-theme owl-loaded" id="videoList"></div>
        </div>

    </div>
</div>

I'm using owl carousel 2.0 version

EDIT:

I already have tried these tricks but none works for me:

// destroy and init in success of ajax
    $('#videoList').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
    $('#videoList').find('.owl-stage-outer').children().unwrap();
     $('#videoList').owlCarousel({
                    loop:false,
                    navRewind:false,
                    margin:10,
                    nav:true,
                    dots:false,
                    navText: '',
                    responsive:{
                        0:{
                            items:1
                        },
                        600:{
                            items:3
                        },
                        1000:{
                            items:5
                        }
                    }
                });

You have to destroy old carousal before each new ajax request see here-https://stackoverflow.com/questions/25339836/how-to-reinit-a-owl-carousel-2-0 — Shubham Dixit, Dec 19 '18 at 06:04
@JaiDixit i have already tried this. `$('#videoList').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded'); $('#videoList').find('.owl-stage-outer').children().unwrap();` and after these lines i called owl to init but still doesn't work. — DojoDev, Dec 19 '18 at 06:06
@JaiDixit check updated question please. And from the video preview you can clearly see that it works on first ajax call but not on 2nd and so on. — DojoDev, Dec 19 '18 at 06:09
@KiranShahi i already have tried that. Once i added that line so i got this error in console `owl.carousel.js:1 Uncaught TypeError: Cannot read property 'indexAbs' of undefined` then i set dots: true, even removed for one test but still that error comes in console. — DojoDev, Dec 19 '18 at 06:15

score 1 · Accepted Answer · answered Dec 19 '18 at 17:50

I have created a Demo based Owl Carousel JSBIN SNIPPET for you. You should be able to take help from it and use this code for your own purpose. It covers all what you are trying to do. The issue is most likely happening with you because you are using old version of Owl Carousel most likely 2.0 while the latest one is 2.3.4 so obviously by applying latest docs methods to the old version will result in errors.

JSBIN Snippet Link: https://output.jsbin.com/mamomofegu

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    margin:10,
    nav:true
  });
});

var newWords = [
  'satellite', 
  'performer', 
  'pawn', 
  'waste', 
  'separation', 
  'curl', 
  'vigorous', 
  'debut', 
  'basis', 
  'doll'
];

var secondBatchWords = [
   'superintendent',
   'cafe',
   'teenager',
   'bubble',
   'guilt',
   'cattle',
   'brilliance',
   'budget',
   'kinship',
   'patch'
];

var checkWords = 0;
$('.loadMoreWords').on('click', function(){
  $('.initCarousel').click();
  for(i = 0; i < newWords.length; i++) {
    var checkWordExistence = $(`.block:contains('${newWords[i]}')`);
    if (checkWordExistence.length) {
      checkWords = 1;
    }
  }
  if (checkWords == 0) {
    var owl = $('.owl-carousel');
    for(i = 0; i < newWords.length; i++) {
      owl.trigger('add.owl.carousel', [`<div class="block">${newWords[i]}</div>`]).trigger('refresh.owl.carousel');
    }
  } else {
    alert('You have already loaded the new Items');
  }
});

var checkWordsForSecondBatch = 0;
$('.loadSecondBatchWords').on('click', function(){
    $('.initCarousel').click();
    for(i = 0; i < secondBatchWords.length; i++) {
      var checkWordExistence = $(`.block:contains('${secondBatchWords[i]}')`);
      if (checkWordExistence.length) {
        checkWordsForSecondBatch = 1;
      }
    }
    if (checkWordsForSecondBatch == 0) {
      var itemsLength = $('.owl-item').length;
      for(i = 0; i < itemsLength; i++) {
        $('.owl-carousel').trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
      }
      for(i = 0; i < secondBatchWords.length; i++) {
        $('.owl-carousel').trigger('add.owl.carousel', [`<div class="block">${secondBatchWords[i]}</div>`]).trigger('refresh.owl.carousel');
      }
    } else {
      alert('You have already loaded the second batch words.');
    }
});

$('.destroyCarousel').on('click', function(){
   var owl = $('.owl-carousel');
   owl.trigger('destroy.owl.carousel');
});

$('.initCarousel').on('click', function(){
  $('.owl-carousel').owlCarousel({
    margin:10,
    nav:true
  });
});

.block {
  border: 1px solid green;
  margin-right:20px;
  padding:50px;
  color:white;
  background:black;
  text-align:center;
  font-size:30px;
  font-family:Arial;
}

.owl-nav {
  font-size: 80px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <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" />
</head>
<body>
<div class="owl-carousel owl-theme">
  <div class="block"> default </div>
  <div class="block"> hang </div>
  <div class="block"> reproduce </div>
  <div class="block"> shot </div>
  <div class="block"> flex </div>
</div>
  
  <button class="loadMoreWords">Load More Words</button>
  <button class="destroyCarousel">Destroy Carousel</button>
  <button class="initCarousel">Init Carousel</button>
  <button class="loadSecondBatchWords">Load Second Batch Words</button>
  
</body>
</html>

Ajax call is not initializing owl carousel on second call?

1 Answers1