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
– Tetsuya Yamamoto, Commented Apr 18, 2017 at 6:55
So where I need to write ( jQuery )); in plugin code?@TetsuyaYamamoto — Eugene
– Eugene, Commented Apr 18, 2017 at 7: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
– Tetsuya Yamamoto, Commented Apr 18, 2017 at 7:30

Community · Accepted Answer · 2017-05-23 11:46:59Z

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

Collectives™ on Stack Overflow

Error in JS plugin (ASP.NET)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related