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

Jquery Problem Overview

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!

Jquery Solutions

Solution 1 - Jquery

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>

Solution 2 - Jquery

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 ));

Solution 3 - Jquery

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>

Solution 4 - Jquery

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>

Solution 5 - Jquery

> 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>

Solution 6 - Jquery

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>

<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

Solution 7 - Jquery

You can use noConflict function:

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

Change all $ to JJ.

Solution 8 - Jquery

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>

Solution 9 - Jquery

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...

};

Solution 10 - Jquery

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" :)

Solution 11 - Jquery

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

Solution 12 - Jquery

I had the same problem when using bootstrap-datewidget and i loaded jquery in the header instead of loading it at the end of the body and it worked.

Solution 13 - Jquery

I agree with MarsPeople regarding loading libraries in the wrong order. My example is from working with owl.carousel.

I got the same error when importing jquery after owl.carousel:

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

and fixed it by importing jquery before owl.carousel:

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

Solution 14 - Jquery

Hope it helps someone on earth. In my case jQuery and $ were available but not when the plugin bootstrapped so I wrapped everything inside a setTimeout. Wrapping inside setTimeout helped me fix the error:

setTimeout(() => {
    /** Your code goes here */

    !function(t, e) {

    }(window);

})

Solution 15 - Jquery

in my case I am sending undefine variable to ajax data property, that's why ajax is not sending.

Content Type	Original Author	Original Content on Stackoverflow
Question	user1048676	View Question on Stackoverflow
Solution 1 - Jquery	Said El-Ghamri	View Answer on Stackoverflow
Solution 2 - Jquery	Šime Vidas	View Answer on Stackoverflow
Solution 3 - Jquery	MarsPeople	View Answer on Stackoverflow
Solution 4 - Jquery	sanzmalz	View Answer on Stackoverflow
Solution 5 - Jquery	Khachornchit Songsaen	View Answer on Stackoverflow
Solution 6 - Jquery	MD Ashik	View Answer on Stackoverflow
Solution 7 - Jquery	Victor Azevedo	View Answer on Stackoverflow
Solution 8 - Jquery	Susha Denis	View Answer on Stackoverflow
Solution 9 - Jquery	Levi Josman	View Answer on Stackoverflow
Solution 10 - Jquery	karantan	View Answer on Stackoverflow
Solution 11 - Jquery	Napster777	View Answer on Stackoverflow
Solution 12 - Jquery	Buhiire Keneth	View Answer on Stackoverflow
Solution 13 - Jquery	josef	View Answer on Stackoverflow
Solution 14 - Jquery	Black Mamba	View Answer on Stackoverflow
Solution 15 - Jquery	HadiNiazi	View Answer on Stackoverflow