TypeError: $ is undefined in jquery

Question

I'm trying to use the "tabcordion" library in jquery on a Wordpress based website. The tabcordion javascript file is being 'enqueued' and appearing after the jquery file (so that bit looks ok).

The start of the jquery code is:

(function($) {
 var Tabcordion;

 $.fn.tabcordion = function(option) {
   return this.each(function() {
    var $this, data, options;
    $this = $(this);
    // rest of code ....

When I load my page I get the error "TypeError: $ is undefined" in Firebug

After a bit of googling I changed all the $. into jQuery.

That sorts some of the issues out but I then get an error about the line:

 $this = $(this);

I'm assuming that I don't have $ defined for jquery. I tried adding a line at the top of the function:

$ = jQuery;

but that didn't work.

Any ideas how I can get the $ to behave?

I have another script that works that is enclosed by:

(function($){ jQuery(document).ready(function($){
    // code in here
}); })(jQuery);

But the end of tabcordion has:

(function($) {
  // tabcordion code....
}).call(this);

And the "call(this)" bit is throwing me?

Any ideas?

Answer 1

You don't have to do anything to make $ defined for jQuery other than include jQuery. The definition is part of the jQuery script.

This error tells you one of three things. Either:

1. You haven't included jQuery prior to including the plugin (or your attempt to has failed, e.g., a 404), or

2. You're loading something else after loading jQuery that is taking over the $ symbol, or

3. You're calling jQuery.noConflict(), which releases the $ symbol.

Based on your $ = jQuery; attempt not having worked, I'd say it's #1. So look to make sure the script tag is in the right place, and look to make sure you're not getting a 404 error (or similar) for it.

---

Update after your comment:

I'm using a plugin called "use google libraries". That is calling jQuery.noConflict() after it has run.

First off, a Wordpress plugin calling noConflict seems like a bad idea to me. Similarly, tabcordian shouldn't be relying on the $ symbol at all; jQuery plugins must not rely on $ because people can use noConflict! And yet a quick look at the tabcordian source shows it doing exactly that: Relying on $.

I would recommend forking tabcordian and correcting it. The usual way you do that in a plugin is by opening with (function($){ and ending with })(jQuery);, like this:

(function($) {
    // plugin code here, can use $ because it refers to our argument,
    // not the global symbol that may not be there
})(jQuery);

Re tabcordian's use of .call(this) that confused you:

(function() {
    // ...tabcordian source...
}).call(this);

That's utterly pointless if you're not using strict mode within the function, which tabcordian isn't. (If you are using strict mode, it's a way to make this continue to refer to the global object within the function.) But as that source is generated from CoffeeScript, this is probably boilerplate CoffeeScript stuff and it's probably doing that to support strict mode.