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

Question

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?

Nigel B · Accepted Answer · 2012-10-05T14:30:18.750

260

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

edited Oct 05 '12 at 14:30

answered May 29 '12 at 21:53

Nigel B

3,577
3
34
52

I should add you need to loose the "jQuery" at the end – Nigel B May 29 '12 at 21:58
3

You are such a LIFE SAVER!!! After 3 days of debugging, I found that this was the exact solution for my issue. Although WordPress was loading the jQuery file, I could not access fucntions mentioned in the document ready. So this exact line of code i.e. `jQuery(document).ready(function ($) {` fixed it for good. Thanks a ton for sharing. – Devner Jan 14 '14 at 21:21
2

this is the same issue in Drupal also. Solution works there too. Thank you – Yogesh Gupta Mar 05 '14 at 12:49

Julian · Answer 2 · 2013-11-09T00:15:36.160

35

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

edited Nov 09 '13 at 00:15

answered May 29 '12 at 21:53

Julian

2,814
21
31

If `$` is already a jquery instance - any reason to pass `jQuery` and give it the `$` name once again? – zerkms May 29 '12 at 21:55
2

$ may not be a jQuery instance if it's conflicting with another library - no-conflict mode. – Julian May 29 '12 at 21:57
4

It is a shortcut to `$(document).ready()`, not `$(document).on('load')` – Kevin B May 29 '12 at 21:57
This worked for me! All the custom.js functions in my theme broke inexplicably. I replaced the $(document).ready(function(){ with this and it worked like magic :) – Ira Herman Jan 18 '13 at 07:39

score 6 · Answer 3 · edited May 16 '13 at 08:44

6

In Wordpress just replace

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

with

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

edited May 16 '13 at 08:44

Aaron Butacov

32,415
8
47
61

answered Jan 30 '13 at 06:58

Shashank Agarwal

712
8
14

score 1 · Answer 4 · answered Aug 26 '13 at 10:24

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/

Best solution if you are using "external" JQuery plugins outside of WP Downside: - Could - conflict with some Wordpress plugins - nothing noticed on my side — RunsnbunsN, Mar 27 '14 at 18:32

score -1 · Answer 5 · answered Nov 03 '12 at 23:27

-1

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)

answered Nov 03 '12 at 23:27

S-kias

15
1

1

I used it like `var $=jQuery.noConflict();` Mine was a java-webapp setup, but I got the same error! – coding_idiot Jul 24 '13 at 14:46

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

5 Answers5

Linked

Related