javascript 如何在 AJAX 调用后重新初始化猫头鹰旋转木马？

lqfhib0f 于 2023-01-16 发布在 Java

关注(0)|答案(4)|浏览(188)

我尝试在一个成功 AJAX 调用后重新初始化owl carousel。ajax调用会改变数据，但是视图应该保持不变。我遇到了视图carousel结构不能重新初始化的问题。我不知道我哪里出错了。
AJAX 请求

$(document).on('click', '.category_list', function() {
    var category_id = $(this).attr('data-id');
    var _token = $('#_token').val();
    var param = 'category_id=' + category_id + '&_token=' + _token;
    $.ajax({
        type: "POST",
        datatype: "json",
        url: "/master/sub_category",
        data: param,
        success: function(result) {
            $('#test').html(result);
            var owl = $(".owl-carousel");
            owl.owlCarousel({
                items: 4,
                navigation: true
            });
        }
    });    
});

控制器功能

public function getImg() {
    $post_data = Request::all();
    $sub_img = $this->imgModel->getImgList($post_data);
    $sub_img_html = '';
    foreach ($sub_img ['data'] as $data_img ) {
        $img = '/img/sub_category/'.$data_img ['img'];            
        $sub_img_html .= '<div class="item">';
        $sub_img_html .= '<img src="'.$img.'" />';
        $sub_img_html .= '</div>';
    }
    echo $sub_img_html;
}

视图

<div id="demo">
    <div id="test" class="owl-carousel">
        <?php
           if (!empty($img_category)) {
              foreach ($img_category as $imgcategory){
        ?>
        <div class="item">
          <img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div>
      <?php
           }
        }
     ?>
  </div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/41106614/how-to-reinitialize-owl-carousel-after-ajax-call

4条答案

按热度按时间

zkure5ic1#

根据您的代码我做了更改，请应用这一点，我希望这个代码的工作充分。

success: function(result) {            
            $('#demo').html('<div id="testing" class="owl-carousel"></div>');
            for(var i=0;i<result.length;i++){
                $(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
            };
            var owl = $("#testing");
            owl.owlCarousel({
                items: 4,
                navigation: true
            });

赞(0）回复(0）举报 2023-01-16

piwo6bdm2#

我相信你需要销毁并重新初始化轮播。这里有一个destroy方法可以调用;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391
或者有刷新方法;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608
或者有更新方法;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569
我相信这些都可以称为;

$('.owl-gallery').owlCarousel('refresh');

或许值得一试。

赞(0）回复(0）举报 2023-01-16

5rgfhyps3#

这是我的方法，它适用于2.2.1版本：

$.getJSON('testimonials.json', function(data) {

    var content = "";
        for(var i in data["items"]){

             var text = data["items"][i].text;
             var name = data["items"][i].name;
             var position = data["items"][i].position;

             content += text + name + position
        }

        // set the content inside the element
        $("#test_slider").html(content);

        // Now we can call the owlCarousel
        $('#test_slider').owlCarousel({
            dots: false,
            nav: true,
            loop: true,
            margin:30,
            smartSpeed: 700,
            items:1,
            autoplay:true,
        });
});

至于testimonials.json看起来像这样：

{
  "items" :
  [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmansss",
      "position": "CEO of ABS Ltd.1"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmanggg",
      "position": "CEO of ABS Ltd.2"
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
      "name": "Maurice Pittmannnn",
      "position": "CEO of ABS Ltd3."
    }
  ]
}

赞(0）回复(0）举报 2023-01-16

osh3o9ms4#

以上没有为我工作，只有这个工作：

$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);

赞(0）回复(0）举报 2023-01-16

我来回答

javascript 如何在 AJAX 调用后重新初始化猫头鹰旋转木马？

4条答案

相关问题

热门标签

最新问答