Develop Reference

TypeError: $ is not a function

I'm trying to use PinchZoomer, a Jquery plugin on a Wordpress Website but I get this error twice in firebug: TypeError: $ is not a function
I know I should use "jQuery" instead of the $ sign in Wordpress but it doesn't make a difference in this case. Here's my code:
<script type="text/javascript">
jQuery( document ).ready(function($) {
$(".pinchzoom").pinchzoomer();
});
</script>
And here's my code to enqueue jQuery and the PinchZoomer plugin in Wordpress:
function add_jQuery_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('hammer', get_template_directory_uri() . '/pinchzoomer/jquery.hammer.min.js', array() );
wp_enqueue_script('mousewheel', get_template_directory_uri() . '/pinchzoomer/jquery.mousewheel.min.js', array() );
wp_enqueue_script('pinchzoomer', get_template_directory_uri() . '/pinchzoomer/jquery.pinchzoomer.min.js', array() );
wp_enqueue_script('modernizr', get_template_directory_uri() . '/pinchzoomer/modernizr.min.js', array() );
wp_enqueue_script('tweenmax', get_template_directory_uri() . '/pinchzoomer/TweenMax.min.js', array() );
}
add_action('wp_enqueue_scripts', 'add_jQuery_scripts');
This is the page where pinchzoomer should work.
What am I missing?

The initial problem
According to the Wordpress docs for wp_enqueue_script, in the third parameter are the dependencies for that file.
This parameter is optional and accepts a type of array. So that jQuery can be used for that file all you would need to do is add it to as a dependency.
For example:
wp_enqueue_script( 'tweenmax', get_template_directory_uri() . '/pinchzoomer/TweenMax.min.js', array('jquery'));
You can read more about this here where the docs explain about 'Linking a Theme Script Which Depends on jQuery'.
Possibly redundant code
I don't think you need to have this part in your code as I think that Wordpress comes with jQuery and you would be defining it as a dependency while 'enqueue-ing' the relevant scripts :
wp_enqueue_script('jquery');
No Conflict Mode
Finally, for the comment about putting jQuery in no conflict and having the dollar symbol present in the function.
By having the dollar symbol in the brackets next to function, this is basically just introducing the $ symbol to the local scope as a way of accessing jQuery without having to re-type jQuery every time while in 'no conflict' mode.
i.e. It's just a shorter way of accessing it. You can read about no conflict wrappers in Wordpress and about using $ for short here in the docs.
Therefore using the library in the following way should be fine.
jQuery(document).ready(function($) {
$(".pinchzoom").pinchzoomer();
});
Problems with PinchZoomer
From looking at the plugins source code and as we discussed in the comments, it could possibly be a problem with the PinchZoomer plugin itself on line 1440 as they have not themselves made $ available to their local scope.
You can test this by setting a breakpoint online 1440, refreshing the page and setting the value of $ to jQuery. If you have access to the source code your self you could make the fix, although really they should make the fix themselves.
The broken code on lines 1433 - 1442 should be fixed to look like the following code:
(function($)
{
function onReady()
{
PinchZoomer.init();
}
$(onReady);
}(jQuery));

When I go to the page you referenced if I evaluate $ in the console I get undefined, but jQuery is defined. I think your issue may be the callback variable, if jQuery is defined than you shouldn't have to worry about $ being defined unless there is a library conflict.
This should work:
jQuery( document ).ready(function() {
$(".pinchzoom").pinchzoomer();
});
Here is a short-hand version of what you are doing:
jQuery(function() {
$(".pinchzoom").pinchzoomer();
});
// Or
$(function() {
$(".pinchzoom").pinchzoomer();
});
As an Anonymous Function
Another alternative would be to wrap your jquery within an anonymous function:
(function($) {
// All of your jquery calls inside of here
$(function() {
$(".pinchzoom").pinchzoomer();
});
})(jQuery);

You can add this code before ready function.
$=jQuery;
Also please use $ or jQuery in second line you use $ please use jQuery and check.

type error in jQuery 1.8 and above

This snippet of code;
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabSelect a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).fadeIn('slow');
$('div.tabs ul.tabSelect a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Works fine in jQuery 1.5 but throws a "type error $ is not a function" error with jQuery 1.10 (or 1.8)
What am i missing here? It's not the first time it's cropped up with migrating god to later jQuery version.
window.jQuery(function () {
var tabContainers = window.jQuery('div.tabs > div');
tabContainers.hide().filter(':first').show();
window.jQuery('div.tabs ul.tabSelect a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).fadeIn('slow');
window.jQuery('div.tabs ul.tabSelect a').removeClass('selected');
window.jQuery(this).addClass('selected');
return false;
}).filter(':first').click();
});
this works just fine. There are no other libraries, just two calls
one
<script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery.js'></script>
is to 1.10.1 and throws the error
`<script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery-1.5.1.min.js'></script>`
doesn't.
that's my question. if you don't understand it don't answer it and don't give me minus reputation because you can't be bothered to read my post.

This error does not comes from the upgrade of jQuery, since $ is still available in current versions.
Check you don't forget to include jQuery, that the file path is OK (use your browser's javascript console, accessible by F12 key) and that you didn't include jQuery two times (older and newer versions together).
Another problem could be that there is a jQuery.noConflict(); call somewhere in your code. This function is meant to prevent those conflict between different versions. You can, for example, do $my_jquery = jQuery.noConflict(); and then use it this way $my_jquery('my_selector')...

You've incorrectly loaded the library:
Check if the lib is loaded before the script is called
Check if you've actually loaded jQuery and not a partially downloaded file, bad file name, or other errors on your console exist.
And/or you're loading a second library which replaces the $ global, ie, Prototype. Or, you've re-assigned the $ global.
Or you're just using cut+paste code from a website and you've copied in a similar looking character that is not actually $ and the computer won't treat it as such.
That's the only way you can have this issue.

From the jQuery documentation. A complete and utter solution of the problem.
Aliasing the jQuery Namespace
When using another JavaScript library, we may wish to call $.noConflict() to avoid namespace difficulties. When this function is called, the $ shortcut is no longer available, forcing us to write jQuery each time we would normally write $. However, the handler passed to the .ready() method can take an argument, which is passed the global jQuery object. This means we can rename the object within the context of our .ready() handler without affecting other code:
jQuery( document ).ready(function( $ ) {
// Code using $ as usual goes here.
});

Declare Code as JQuery

I have mootools and jquery installed (Joomla) for various reasons, and I think my jquery code is trying to run through mootools because I keep getting a bunch of garbage errors with $.getJSON. Is there something I can wrap around my Jquery code that I don't have this kind of cross-framework conflict?

You need to use noConflict():
http://api.jquery.com/jQuery.noConflict/
You can replace $ with any variable you want:
var $jq = jQuery.noConflict();
If you read the doc, you can use noConflict and still use $ within a $.ready() call, and use $ for mootools outside of the ready call.

var jQuery = jQuery.noConflict();
then try replace the $ with jQuery
or alternatively just jQuery.noConflict(); and keep using $
Check this

Add function to existing JQuery plugin

Is it possible to add a function to a plugin without modifying the actual plugin? Can I do something like this in my site's js file?
$.fn.Watermark.Refresh = function() {
$.Watermark.HideAll();
$.Watermark.ShowAll();
}
or
(function($){
$.fn.Watermark.Refresh = function() {
$.Watermark.HideAll();
$.Watermark.ShowAll();
};
})(jQuery);
neither worked, the first says $ is undefined, the second that jQuery is undefined...
ideas?
Solution: Either method works, just include the jquery file before the site js file.

You can add those functions if you want to, but you'll have to make sure that you're also loading jQuery itself and the plugin to be modified. If you're getting those errors (that jQuery or "$" are not defined), then you have not correctly done that.
Now, though it's true that you can add those functions, I have to wonder what the point would be. If I were to do this, for example:
$.fn.css.myFunction = function() { return "hello world"; };
then it would be possible to call it:
var str = $.fn.css.myFunction();
but so what? What good does that do me? I don't think it's very useful.

Make sure you are including the plugin after jQuery.

mootools: $ not defined

I've strange error i don't understand. I'm just moving my code from jQuery over to Mootools because it's much cleaner than the jQuery mess.
Now when i use the
$$('div.canvas')
in mootools i get the correct element.
When i try
$(document).getElement('div.canvas')
it tells me that $ is not defined. How can $$ and all helper functions like $lambda etc. be defined but not $?
Has something changed there from 1.1 to 1.2 and the docs are not updated yet?

as someone pointed out, when $ is defined, mootools 1.2.3+ will not take it over, it will revert to using document.id instead. this did not used to happen before that release so it largely depends on the version you are referencing. but it's certainly changed since 1.11 and it IS documented, read the announcement here http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
to your application design this means that, if your structure is...
load jquery (no need for noconflict, does not matter)
load mootools
... it can work as follows:
$("#foo"); // jquery
document.id("foo"); // mootools
// or create a temporary scope for mootools things
(function($) {
$("foo"); // mootools
})(document.id);
best / recent practices in mootools development require plugins and code released to reference document.id or be within such a closure to ensure compatibility. this is actually ok as unlike in jquery where $ aliases the jQuery singleton, in mootools $ is just a selector so its use will be far less spread. Hence typing document.id("selector") is not going to be that much of a drag.

Have you removed all reference to jQuery in your htmls?

MooTools will not override the $ function if it exists already. It checks for nullness of $ before defining it. So I suspect the $ is still lurking somewhere.
if (window.$ == null) Window.implement({
$: function(el, nc){
return document.id(el, nc, this.document);
}
});
After including jQuery and running $.noConflict(); but before including MooTools, can you log the contents of $ and see what is logged?
include jquery
$.noConflict();
console.log($); // should return undefined
include mootools

If you are using both libraries on the same page you must use JQuery's noConflict() function
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
If you are still having trouble, try checking through your included JQuery files to ensure that any plugins/code use jQuery('div.canvas') etc instead of $ as $ has been released by the noConflict() function and will not run JQuery code.