Owl Carousel inside Updatepanel Disappear After Postback

Question

I have repeater control to show something.

<div class="owl-carousel trend" style="height:20px;">

    <asp:Repeater ID="rptThing" runat="server" DataSourceID="yyy">

        <ItemTemplate>

            <asp:LinkButton ID="lnkEtiket" runat="server" OnClick="lnkEtiket_Click">go</asp:LinkButton>

        </ItemTemplate>

    </asp:Repeater>

</div>

It's inside of an updatepanel. No problem on page load but when onClik it disappears. I know it about ajax & jquery issue but I couldn't solve problem. I tried so many examples. Here is my jquery

<script type=text/javascript>

    var owltrend = $('.trend');

    owltrend.owlCarousel({

        margin: 5,

        loop: true,

        startPosition: 0,

        lazyLoad: true,

        rtl: false,

        nav: false,

        autoWidth: true,

    });

</script>

Note: Its owl carousel 2

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You need to trigger the jqery binding again.

<script type="text/javascript">
    $(document).ready(function () {
        createCarousel();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        createCarousel();
    });

    function createCarousel() {
        var owltrend = $('.trend');
        owltrend.owlCarousel({
            margin: 5,
            loop: true,
            startPosition: 0,
            lazyLoad: true,
            rtl: false,
            nav: false,
            autoWidth: true,

        });
    }
</script>

prm.add_endRequest is triggered when the UpdatePanel is done loading.

Owl Carousel inside Updatepanel Disappear After Postback

Sign up