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

Question

All, I'm getting an error from some of my code that I downloaded. Here is the code:

/*----------------------------------------------------------------------*/
/* wl_Alert v 1.1 
/* description: Handles alert boxes
/* dependency: jquery UI Slider, fadeOutSlide plugin
/*----------------------------------------------------------------------*/


$.fn.wl_Alert = function (method) {
var args = arguments;
return this.each(function () {

    var $this = $(this);


    if ($.fn.wl_Alert.methods[method]) {
        return $.fn.wl_Alert.methods[method].apply(this, Array.prototype.slice.call(args, 1));
    } else if (typeof method === 'object' || !method) {
        if ($this.data('wl_Alert')) {
            var opts = $.extend({}, $this.data('wl_Alert'), method);
        } else {

            var opts = $.extend({}, $.fn.wl_Alert.defaults, method, $this.data());
        }
    } else {
        $.error('Method "' + method + '" does not exist');
    }


    if (!$this.data('wl_Alert')) {

        $this.data('wl_Alert', {});

        //bind click events to hide alert box
        $this.bind('click.wl_Alert', function (event) {
            event.preventDefault();

            //Don't hide if it is sticky
            if (!$this.data('wl_Alert').sticky) {
                $.fn.wl_Alert.methods.close.call($this[0]);
            }

            //prevent hiding the box if an inline link is clicked
        }).find('a').bind('click.wl_Alert', function (event) {
            event.stopPropagation();
        });
    } else {

    }
    //show it if it is hidden
    if ($this.is(':hidden')) {
        $this.slideDown(opts.speed / 2);
    }

    if (opts) $.extend($this.data('wl_Alert'), opts);
});

};

$.fn.wl_Alert.defaults = {
speed: 500,
sticky: false,
onBeforeClose: function (element) {},
onClose: function (element) {}
};
$.fn.wl_Alert.version = '1.1';


$.fn.wl_Alert.methods = {
close: function () {
    var $this = $(this),
        opts = $this.data('wl_Alert');
    //call callback and stop if it returns false
    if (opts.onBeforeClose.call(this, $this) === false) {
        return false;
    };
    //fadeout and call an callback
    $this.fadeOutSlide(opts.speed, function () {
        opts.onClose.call($this[0], $this);
    });
},
set: function () {
    var $this = $(this),
        options = {};
    if (typeof arguments[0] === 'object') {
        options = arguments[0];
    } else if (arguments[0] && arguments[1] !== undefined) {
        options[arguments[0]] = arguments[1];
    }
    $.each(options, function (key, value) {
        if ($.fn.wl_Alert.defaults[key] !== undefined || $.fn.wl_Alert.defaults[key] == null) {
            $this.data('wl_Alert')[key] = value;
        } else {
            $.error('Key "' + key + '" is not defined');
        }
    });

}
};

//to create an alert box on the fly
$.wl_Alert = function (text, cssclass, insert, after, options) {
//go thru all
$('div.alert').each(function () {
    var _this = $(this);
    //...and hide if one with the same text is allready set
    if (_this.text() == text) {
        _this.slideUp($.fn.wl_Alert.defaults.speed);
    }
});

//create a new DOM element and inject it
var al = $('<div class="alert ' + cssclass + '">' + text + '</div>').hide();
(after) ? al.appendTo(insert).wl_Alert(options) : al.prependTo(insert).wl_Alert(options);

//return the element
return al;
};

Has anyone seen this type of error before? How would I resolve something like this? Thanks for any advice you have!

Answer 1

try to call jQuery library before bootstrap.js

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 2

Try this:

(function ( $ ) { 

    // put all that "wl_alert" code here   

}( jQuery ));

So, the $ variable is apparently corrupted, but the jQuery variable should still refer to the jQuery object. (In normal circumstances, both the $ and jQuery variables refer to the (same) jQuery object.)

Instead of having to replace the $ name with the jQuery name in your entire code, you can simply use an IIFE to alias the name manually. So, the outside-variable jQuery is aliased with the $ variable inside the function.

Here's a simple example to help you understand this concept:

var foo = 'Peter';

(function ( bar ) {

    bar // evaluates to 'Peter'

}( foo ));

Answer 3

If you get Cannot read property 'fn' of undefined, the problem may be you loading libraries in wrong order.

For example:

You should load bootstrap.js first and then load bootstrap.js libraries.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

Answer 4

Import the jquery CDN as a first

(e.g)

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Answer 5

I fixed it by added the jquery.slim.min.js after the jquery.min.js, as the Solution Sequence.

Problem Sequence

<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

Solution Sequence

<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/jquery/jquery.slim.min.js"></script>
<script src="./vendor/jquery-easing/jquery.easing.min.js"></script>

Answer 6

Ha ha ha Funny it's a simple mistake for me

I got async on my jquery library call. Just remove it and I got solution.

<script async src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

TO

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Why it did this kind of behave: I got documentation on W3schools LINK

Definition and Usage async

The async attribute is a boolean attribute.

When present, it specifies that the script will be executed asynchronously as soon as it is available.

Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).

Note: There are several ways an external script can be executed:

1. If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)

2. If async is not present and defer is present: The script is executed when the page has finished parsing

3. If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

Answer 7

You can use noConflict function:

var JJ= jQuery.noConflict(); 
JJ('.back').click(function (){
    window.history.back();
}); 

Change all $ to JJ.

Answer 8

When I used Electron + Angular such order helped me to solve problem

  <script src="./assets/js/jquery-3.3.1.min.js"></script>
  <script src="./assets/js/jquery-3.3.1.slim.min.js"></script>
  <script src="./assets/js/popper.min.js"></script>
  <script src="./assets/js/bootstrap.min.js"></script>

Answer 9

I too had the "Uncaught TypeError: Cannot read property 'fn' of undefined" with:

$.fn.circleType = function(options) {

CODE...

};

But fixed it by wrapping it in a document ready function:

jQuery(document).ready.circleType = function(options) {

CODE...

};

Answer 10

This error might also occur if you have require.js (requirejs) implemented and you did not wrap some lib that you are using inside

define(['jquery'], function( jQuery ) { ... lib function ... });

NOTE: you do not have to do this if this lib has AMD support. You can quickly check this by opening this lib and just ctrl+f "amd" :)

Answer 11

I had the same problem and I did it this way

//note that I added jquery separately above this

<!--ENJOY HINT PACKAGES --START -->
<link href="path/enjoyhint/jquery.enjoyhint.css" rel="stylesheet">
<script src="path/enjoyhint/jquery.enjoyhint.js"></script>
<script src="path/enjoyhint/kinetic.min.js"></script>
<script src="path/enjoyhint/enjoyhint.js"></script>  
<!--ENJOY HINT PACKAGES --END -->

and it works