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

Question

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

After click the indices button:-

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.

SioGabx · Accepted Answer · 2024-04-02 14:00:25Z

0

you have to call $('#indices_carousel_intraday').owlCarousel({ after the dynamic data was loaded

$(document).ready(function () {

IntradayPicksIndicesTab();
$('#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
            }
        }

    });
});


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

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<!-- 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>

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

edited Apr 2, 2024 at 14:00

SioGabx

7144 silver badges14 bronze badges

answered Apr 2, 2024 at 13:55

jeremy-denis

6,8963 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ashok Over a year ago

Hi @jeremy-denis Thanks for your answer post and I have changed the code as per your answer but still I'm facing the same issue

jeremy-denis Over a year ago

if you launch the above snippet it's running. what is your issue ? do you have an error message in console ? do you have no carousel loaded ?

ashok Over a year ago

what is your issue ? My issue is code appending properly but the "owl carousel" required class not loading properly when I click the 'indices' button do you have an error message in console ? I didn't get any kind of error logic working properly do you have no carousel loaded ? I think this is the issue I'm facing because when the page is loaded some initial class coming and when I click the button some of the class are not loading properly I think. Can you please help me on this ? with best example ?

jeremy-denis Over a year ago

you mean that owl carousel is not load when you call $('#indices_carousel_intraday').owlCarousel ? are you loading it when the page load or when you click on button ?

ashok Over a year ago

In both scenario I'm loading this (after append the data to <div> then only I'm loading the $('#indices_carousel_intraday').owlCarousel as per concept) because I have to show the data onplage load and button click event as well.

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related