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?

This is much related to script loading order. Have the page loaded Carousel plugin before jQuery? If no, probably `$` variable already assigned with other than jQuery and requires IIFE such like `(function ( $ ) { ... }( jQuery ));` or `jQuery.noConflict(true);` to restore it. — Tetsuya Yamamoto, Apr 18 '17 at 06:55
So where I need to write `( jQuery ));` in plugin code?@TetsuyaYamamoto — Eugene, Apr 18 '17 at 07:07
From the Carousel script, `a.fn.owlCarousel` stands for `$.fn.owlCarousel`, which certainly requires jQuery which uses `$` variable. Try changing script loading order which jQuery must be in topmost part, if it still persists add IIFE mentioned above inside HTML script tag (leave plugin contents as is). — Tetsuya Yamamoto, Apr 18 '17 at 07:30
Is the video loaded blank, generating invalid markup or something else? Edit the question which provides further details related to video embedding since script loading order problem had already resolved. — Tetsuya Yamamoto, Apr 18 '17 at 07:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141947/discussion-between-eugene-and-tetsuya-yamamoto). — Eugene, Apr 18 '17 at 07:49

score 1 · Accepted Answer · edited May 23 '17 at 11:46

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

Error in JS plugin (ASP.NET)

1 Answers1