Develop Reference

Initializing jQuery plugin with noConflict

So I'm attempting work within the constraints of a request and have made some progress bet am still getting locked up. Here's the scenario:
Currently, I'm working with a website that depends on jQuery v1.4.2. Since the only access I'm given on the backend is the ability to inject content into a CMS driven page, I had been sideloading jQuery 1.11 to support for some much needed functionality.
Flash forward to yesterday and I was made aware that the client's dev team has now bundled v1.4 and v1.11 and has noConflicted 1.11 into $$.
(function() {
$$ = $.noConflict( true ); // Move jQuery 1.11.0 into $$ and restore $ to jQuery 1.4.2
})();
// Use the following self-invoking anonymous function
// when you need to run code that depends on $ = jQuery 1.11
// Otherwise, you can access jquery 1.11 with $$
// (function( $ ){
// inside here $ is jQuery 1.11
// and jQuery 1.4.2 is out of scope
// })( $$ );
Since my scripts (and the plugin I am attempting to load into the page) are injected in the middle of the page and the jQuery v1.4 and v1.11 are at the bottom of the page, I am loading it this way:
(function checkForJquery() {
if ('$$' in window) {
(function($) {
console.log('success');
$.getScript("myplugin.jquery.js", function() {
$( ".devices").myplugin({
// devices - Array | productID
prop1: ["prod3960155", "prod3640151", "prod3640152", "prod5530141"],
prop2: "attribute",
prop3: "attribute"
});
});
})($$);
} else {
console.log('not yet');
window.setTimeout(checkForJquery, 1000);
}
})();
So the issue I'm having is that if I use:
(function( $ ){})( $$ );
I get nothing - the plugin never initializes. However, if I use:
(function( $ ){})( jQuery );
it does work, but then I don't have access to the latest API. Any ideas why one would work and not the other?
For clarity, I'm using the jQuery Plugin Boilerplate and it starts like this:
;( function( $, window, document, undefined ) { } )( jQuery, window, document );
Any insights would be much appreciated!
Thanks,
Joe

The reason your script won't work is not your call of the plugin, it is the creation.
To explain, the code below only uses the second instance $$ to search for all elements with the class .devices and starts your plugin myPlugin. Nothing else.
(function($) {
$(".devices").myplugin();
})($$);
But you have registered your plugin only to the old version. This is the reason why it workes, when you use jQuery instead of $$ on the code above.
To use the $$ jQuery instance in your plugin, you have to set it on creation too. But there you has passed in jQuery. And because you used noConflict, the name jQuery belongs to the old version of jQuery.
To register your plugin to the right instance, you have to change it to $$ on the creation too.
;(function($, window, document, undefined){})($$, window, document);
To make your plugin working on other installations, you can add jQuery as a fallback. This would help if you use the plugin on other sites too and don't want to change it every time.
;(function($, window, document, undefined){})($$ || jQuery, window, document);
Thats it.

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.

wp_localize_script with handle jquery - wordpress script

I'm looking for next solution. I want faster website so I concat all JS to one file and placed in footer. One of my js is jQuery and I use next hook and function:
if (!function_exists("ef_theme_scripts")) {
function ef_theme_scripts() {
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri() . '/js/min/script.min.js', null, null, true);
wp_enqueue_script('jquery');
$params = array(
'ajax_url' => admin_url('admin-ajax.php'),
'ajax_nonce' => wp_create_nonce('user_nonce'),
);
wp_localize_script( 'jquery', 'ajax_object', $params );
}
}
add_action('wp_enqueue_scripts', 'ef_theme_scripts');
I called my handle "jquery" because there can be some scripts (e.g. from plugins) which wants use jquery so I need add called this handle "jquery".
Everything works great except localize. When I rename script handle for example to "custom-jquery" then wp_localize_script works without problem.
I use WP 4.0.1. Thanks for help

IMPORTANT! wp_localize_script() MUST be called after the script it's being attached to has been registered using wp_register_script() or wp_enqueue_script().
More info

I asked a similar question and got the working solution here :
wp_localize_script not working with jquery handle
Basically this has to do with the way that WP works with the jQuery handle, you'll need to
deregister jquery
deregister jquery-core
Use the jquery-core handle on your script
at the end register jquery, with a dependency on jquery-core and passing false for the $scr attribute
Code:
wp_register_script( 'jquery', false, array( 'jquery-core' ), false, true );

Writing a custom plugin for Zepto with jQuery fallback

I am looking into Zepto with a jQuery fallback (as seen on Zepto's website) to see if it is viable for an upcoming project.
I was hoping to build a custom plugin using $.extend, but noticed in Zepto's example that they pass in Zepto as the $ variable as does jQuery. Would there be a way to pass in whatever library is loaded?
Zepto plugin:
;(function($){
$.extend($.fn, {
foo: function(){
}
})
})(Zepto)
jQuery plugin:
(function( $ ) {
$.fn.myPlugin = function() {
};
})( jQuery );

Edit: Updated answer.
My original thoughts were to simply pass $ as the parameter, which works, but doesn't offer great portability if the plugin is to be distributed throughout various projects.
Instead you should use the OR operator to detect whether Zepto is loaded, falling back to jQuery if it isn't.
;(function($){
$.extend($.fn, {
foo: function(){
}
})
})(window.Zepto || window.jQuery)

Use jQuery.noConflict() to avoid collision with another library that uses $ alias. That way $ would always be Zepto and you can use any other alias you want for jQuery, or just use the jQuery object itself
You can still use $ in your jQuery code wrapped in document.ready if you pass it as an argument of document.ready;
API Reference: http://api.jquery.com/jQuery.noConflict/

$ not defined but jQuery IS defined in Wordpress

What might cause Firefox to tell me $ is not defined, but using 'jQuery' works as expected.
I'm on Wordpress 3.4 and Wordpress comes packaged with jQuery. Is it something specific to Wordpress?

jQuery.noConflict() has been called. To resolve this with a minimum amount of code change do this.
Before:
$("your").code(function () {
$("that").uses($.all("over").the("place"));
});
After:
(function ($) {
$("your").code(function () {
$("that").uses($.all("over").the("place"));
});
})(jQuery);

jQuery works in noConflict mode inside wordpress as the docs state: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers