"owl carousel" not working when appending data dynamically using jquery

Ashok Kumar 201 Reputation points
2024-05-06T04:31:47.04+00:00

I'm appending the data dynamically to "owl carousel" and initially the data is showing correctly and next (when I click the button) I'm erasing and re-assigning the data to the "owl carousel" (because the data will keep change) at that time the data is not appending properly to the "owl carousel" div and I have followed this document also.

Image example

initially page load:-

Data appending properly

After click the indices button:-

Data not appending properly

The entire logic is below

Using links are:-


<!-- Owl Carousel CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

    <!-- jQuery -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Owl Carousel JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

jQuery logic is:-


$(document).ready(function () {

   

 $('#indices_carousel_intraday').owlCarousel({

        items: 4,

        loop: false,

        //autoplay: true,

        //autoplayTimeout: 8500,

        margin: 12,

        nav: false,

        dots: true,

        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],

        responsive: {

            0: {

                items: 1

            },

            768: {

                items: 3

            },

            1170: {

                items: 3

            },

            1440: {

                items: 4

            }

        }

    });

IntradayPicksIndicesTab();

});

function IntradayPicksIndicesTab() {

    var i_ind_data = "";

    $("#indices_carousel_intraday").empty();

        for (var i = 0; i < 4; i++) {

            i_ind_data += `<div class="card h-100 lavenderBG border-0 radius24">

                                <div class="card-body p-md-4 p-3">

                                    <small class="px-2 py-0 greenLightBG rounded">BUY</small>

                                    <div class="row align-items-center mt-0 mb-1 mb-md-0 ">

                                        <div class="col-12 col-md-9 cardTitle">BANKNIFTY23NOVFUT</div>

                                        <div class="col-12 col-md-3 text-right mt-2 mt-md-0">

                                            <input type="submit" value="Trade" class="btn btn-success btn-sm w-100 w-md-auto">

                                        </div>

                                    </div>

                                    <small>11:00:25</small>

                                    <div class="row align-items-center my-2 justify-content-around">

                                        <div class="col-md-3 col-4 d-flex">

                                            <small class="texGrayDark me-1">Entry:</small>

                                            <span>100.25</span>

                                        </div>

                                        <div class="col-md-3 col-4 d-flex">

                                            <small class="texGrayDark me-1">LTP:</small>

                                            <span class="textSuccess">105.25</span>

                                        </div>

                                    </div>

                                    <div class="row align-items-center my-3 ">

                                        <div class="col-md-3 col-4 d-flex flex-column">

                                            <small class="texGrayDark">Qty</small>

                                            <span>15</span>

                                        </div>

                                        <div class="col-md-3 col-4 d-flex flex-column">

                                            <small class="texGrayDark">TPL</small>

                                            <span class="textBlue">798</span>

                                        </div>

                                        <div class="col-md-3 col-4 d-flex flex-column">

                                            <small class="texGrayDark">Inv.</small>

                                            <span>96687</span>

                                        </div>

                                        <div class="col-md-3 col-12 d-md-flex flex-md-column">

                                            <small class="texGrayDark">Status</small>

                                            <span>Auto Close</span>

                                        </div>

                                    </div>

                                    <div class="row align-items-center ">

                                        <div class="col-12 mt-0">

                                            <small class="d-flex justify-content-between py-1 px-2 bg-white rounded">

                                                <div>Target: 1000.56</div>

                                                <div>Stop Loss: 250.69</div>

                                            </small>

                                        </div>

                                    </div>

                                </div>

                            </div>`;

        }

        $("#indices_carousel_intraday").append(i_ind_data);

        ////Refresh Owl Carousel after content change

        $('#indices_carousel_intraday').trigger('refresh.owl.carousel');

    }

Asp.net(HTML) code:-


<a href="javascript://" class="nav-link active" id="nav_indices_tab" onclick="IntradayPicksIndicesTab();" data-bs-toggle="tab" data-bs-target="#indices"

                                type="button">Indices</a>

<div class="tab-pane fade active show" id="indices">

 <div class="owl-carousel mt-3" id="indices_carousel_intraday">

  <!-- dynamic data will append here -->

     </div>

  </div>

I'm not sure where I did the mistake and how to achieve this concept

Suggest me where I did the mistake and how to solve this issue.

Sorry for my bad English.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,317 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
902 questions
{count} votes

Accepted answer
  1. Lan Huang-MSFT 26,526 Reputation points Microsoft Vendor
    2024-05-06T09:49:08.23+00:00

    Hi @Ashok Kumar,

    You need to change the following two places

    Change

    User's image

    To:

    <div class="owl-carousel owl-theme" id="indices_carousel_intraday">
        <!-- dynamic data will append here -->
    </div>
    

    Change

    User's image

    To:

     $('#indices_carousel_intraday').trigger('destroy.owl.carousel');
     $('#indices_carousel_intraday').owlCarousel();
    

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful