jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

Jquery

Jquery Problem Overview


All, I downloaded a prebundled JS/CSS form application and I'm trying to use it in Wordpress. I've got the following code:

$(document).ready(function () {


/*----------------------------------------------------------------------*/
/* Parse the data from an data-attribute of DOM Elements
/*----------------------------------------------------------------------*/


$.parseData = function (data, returnArray) {
	if (/^\[(.*)\]$/.test(data)) { //array
		data = data.substr(1, data.length - 2).split(',');
	}
	if (returnArray && !$.isArray(data) && data != null) {
		data = Array(data);
	}
	return data;
};

/*----------------------------------------------------------------------*/
/* Image Preloader
/* http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
/*----------------------------------------------------------------------*/



// Arguments are image paths relative to the current page.
$.preload = function() {
	var cache = [],
		args_len = arguments.length;
	for (var i = args_len; i--;) {
		var cacheImage = document.createElement('img');
		cacheImage.src = arguments[i];
		cache.push(cacheImage);
	}
};


/*----------------------------------------------------------------------*/
/* fadeInSlide by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.fadeInSlide = function (speed, callback) {
	if ($.isFunction(speed)) callback = speed;
	if (!speed) speed = 200;
	if (!callback) callback = function () {};
	this.each(function () {

		var $this = $(this);
		$this.fadeTo(speed / 2, 1).slideDown(speed / 2, function () {
			callback();
		});
	});
	return this;
};


/*----------------------------------------------------------------------*/
/* fadeOutSlide by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.fadeOutSlide = function (speed, callback) {
	if ($.isFunction(speed)) callback = speed;
	if (!speed) speed = 200;
	if (!callback) callback = function () {};
	this.each(function () {

		var $this = $(this);
		$this.fadeTo(speed / 2, 0).slideUp(speed / 2, function () {
			$this.remove();
			callback();
		});
	});
	return this;
};

/*----------------------------------------------------------------------*/
/* textFadeOut by revaxarts.com
/* Fades out a box and slide it up before it will get removed
/*----------------------------------------------------------------------*/


$.fn.textFadeOut = function (text, delay, callback) {
	if (!text) return false;
	if ($.isFunction(delay)) callback = delay;
	if (!delay) delay = 2000;
	if (!callback) callback = function () {};
	this.each(function () {

		var $this = $(this);
		$this.stop().text(text).show().delay(delay).fadeOut(1000,function(){
			$this.text('').show();
			callback();
		})
	});
	return this;
};

/*----------------------------------------------------------------------*/
/* leadingZero by revaxarts.com
/* adds a leding zero if necessary
/*----------------------------------------------------------------------*/


$.leadingZero = function (value) {
	value = parseInt(value, 10);
	if(!isNaN(value)) {
		(value < 10) ? value = '0' + value : value;
	}
	return value;
};


});

I was assuming that the Wordpress no conflict was causing an issue so I updated the very last bracket to look like the following:

}, "jQuery");

However, I'm still getting the same error. Does anyone know what would be casuing this issue and how to get it resolved?

Thanks in advance!

Jquery Solutions


Solution 1 - Jquery

This is a syntax issue, the jQuery library included with WordPress loads in "no conflict" mode. This is to prevent compatibility problems with other javascript libraries that WordPress can load. In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used, i.e.

jQuery(document).ready(function ($) {

By including the $ in parenthesis after the function call you can then use this shortcut within the code block.

For full details see WordPress Codex

Solution 2 - Jquery

My favorite no-conflict-friendly construct:

jQuery(function($) {
  // ...
});

Calling jQuery with a function pointer is a shortcut for $(document).ready(...)

Or as we say in coffeescript:

jQuery ($) ->
  # code here

Solution 3 - Jquery

In Wordpress just replace

$(function(){...});

with

jQuery(function(){...});

Solution 4 - Jquery

You can consider to replace default WordPress jQuery script with Google Library by adding something like the following into theme functions.php file:

function modify_jquery() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2');
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'modify_jquery');

Code taken from here: http://www.wpbeginner.com/wp-themes/replace-default-wordpress-jquery-script-with-google-library/

Solution 5 - Jquery

maybe you have code like this before the jquery:

var $jq=jQuery.noConflict();
$jq('ul.menu').lavaLamp({
	fx: "backout", 
	speed: 700
});

and them was Conflict

you can change $ to (jQuery)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1048676View Question on Stackoverflow
Solution 1 - JqueryRedEyedMonsterView Answer on Stackoverflow
Solution 2 - JqueryJulianView Answer on Stackoverflow
Solution 3 - JqueryShashank AgarwalView Answer on Stackoverflow
Solution 4 - Jqueryp.voinovView Answer on Stackoverflow
Solution 5 - JqueryS-kiasView Answer on Stackoverflow