Error in JS plugin (ASP.NET)

Question

I try to use https://owlcarousel2.github.io/OwlCarousel2/

Plugin

But I have this error

Uncaught TypeError: Cannot read property 'fn' of undefined at owl.carousel.min.js:479 at owl.carousel.min.js:494

In this code

a.fn.owlCarousel = function (b) {
        var c = Array.prototype.slice.call(arguments, 1);
        return this.each(function () {
            var d = a(this),
                f = d.data("owl.carousel");
            f || (f = new e(this, "object" == typeof b && b), d.data("owl.carousel", f), a.each(["next", "prev", "to", "destroy", "refresh", "replace", "add", "remove"], function (b, c) {
                f.register({
                    type: e.Type.Event,
                    name: c
                }), f.$element.on(c + ".owl.carousel.core", a.proxy(function (a) {
                    a.namespace && a.relatedTarget !== this && (this.suppress([c]), f[c].apply(this, [].slice.call(arguments, 1)), this.release([c]))
                }, f))
            })), "string" == typeof b && "_" !== b.charAt(0) && f[b].apply(f, c)
        })
    }

Here is how I use plugin in my code

 <script>
    $('#display').click(function () {
        var vacancyId = $("#vacancy").val();
        var model = {
            vacancyId: vacancyId
    };

        $.ajax({
    url: '@Url.Action("Links", "Questions")',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(model),
    type: 'POST',
    dataType: 'json',
    processData: false,
    success: function (data) {
        var question2 = data;
        for (var i = 0; i <= question2.length - 1; i++) {
            var videoHTML = '<video width="320" height="240" style="margin-left: 130px;margin-top: 20px;" controls>';
            videoHTML += '<source src="' + document.location.origin + "/uploads/" + question2[i].Linkes + ".webm" + '" type="video/webm">';
            videoHTML += '</video>';
            $(".videolist").append(videoHTML);
            $(".videolist").owlCarousel();
        }
    }
    });
});
</script>

How I can fix it?

Answer 1

This error means that script loading order went wrong or out of order:

TypeError: Cannot read property 'fn' of undefined at owl.carousel.min.js:479 at owl.carousel.min.js:494

Since Owl.Carousel plugin requires jQuery to run, place jQuery on topmost of all scripts order then place owl.carousel.min.js afterwards like this example (read Owl Carousel plugin docs for further info):

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/owl-carousel/owl.carousel.min.js"></script>

Second, ensure the Carousel plugin loaded inside $(document).ready scope, to initialize all DOM-related objects:

<script>
    $(document).ready(function () {
        $('#display').click(function () {
            // other stuff
        });

        $.ajax({
                // other stuff

                success: function (data) {
                    var question2 = data;
                    for (var i = 0; i <= question2.length - 1; i++) {

                        // other stuff

                        $(".videolist").owlCarousel();
                    }
                }
        });
    });
</script>

The last important thing to remember with: not all scripts can be loaded simultaneously (which may breaking script order at certain point affected by latency), therefore you need to check existence of owlCarousel before invocation with either isFunction:

if ($.isFunction('owlCarousel')) {
    $(".videolist").owlCarousel();
}

or using simple typeof operator (credits to @Nolwennig):

if(typeof owlCarousel === 'function') { 
    $(".videolist").owlCarousel();
}

Related issues:

jQuery Uncaught TypeError: Cannot read property 'fn' of undefined (anonymous function)

TypeError: $(...).owlCarousel is not a function