Ajax-вызов не инициализирует сову-карусель при втором вызове? - PullRequest
Новая
       12

Ajax-вызов не инициализирует сову-карусель при втором вызове?

0 голосов
/ 19 декабря 2018

Я пытаюсь загрузить данные в совую карусель при каждом клике.Он отлично работает при первом вызове, но при втором вызове нарушает структуру карусели сов и показывает, что элементы расположены вертикально!

В консоли нет ошибок, ajax успешно получает данные, но карусель совы не инициализируется, Ползунок отлично работает при первом вызове Ajax, но не работает во второй трети и т. Д.

Js Код: 

$('.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-код, в который вставляются / вставляются данные ajax: 

<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>

Я использую версию Owl Carousel 2.0

РЕДАКТИРОВАТЬ:

Я уже пробовал эти приемы, но ни один из них не работает для меня: 

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

1 Ответ

0 голосов
/ 19 декабря 2018

Я создал демо-версию JSBIN SNIPPET для Owl Carousel.Вы должны иметь возможность получить от него помощь и использовать этот код в своих целях.Он охватывает все, что вы пытаетесь сделать. Скорее всего, проблема возникает у вас, потому что вы используете старую версию Owl Carousel, скорее всего, 2.0, а последняя - 2.3.4, поэтому очевидно, что применение старых методов docs к старой версии приведет к ошибкам .

Ссылка на фрагмент JSBIN: 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>
...