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.
Related
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.
});
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/
I am not too familiar with jQuery.noConflict. I have tried to implement it a couple times, but I feel I am doing it wrong.
Is there a way to set a noConflict with "jquery-1.7.1.min.js"? Do I put it in the actual file, or in the header of my index or both? I have tried to follow examples but I know I am doing it wrong.
Any guidance or quick examples would help me tremendously!
var foo = $.noconflict();
foo('body').addClass('bar');
You can either assign it a new alias (as shown above) or call $.noConflict and only have jQuery available for use. If you chose an alias though you must use that new alias every time you want to reference jQuery.
Keep in mind though that you can enable noConflict, but still have it available when necessary using an anonymous function:
// disable $ and force use of myJQ
var myJQ = jQuery.noConflict();
(function($){
//
// be able to use $ within this block and have it mean jQuery
//
$('body').addClass('foo');
})(myJQ);
// we're outside the block, now we're back to myJQ
myJQ('body').removeClass('foo');
No conflict mode is easy to use. Include this shortly after loading jQuery and any jQuery-dependent libraries:
var $j = jQuery.noConflict();
Then, instead of using $ for everything, use $j:
var elements = $j('.class-name');
Have you tried the following examples:
http://api.jquery.com/jQuery.noConflict/
I think it says all about it. Check your browser console to see any errors.
I'd recommend using a noConflict call, as well as wrapping your jQuery code with an anonymous function, so you can call jQuery by $:
jQuery.noConflict();
(function ($) {
// Now you can use $ to call jQuery
}(jQuery));
I am working on a website globalization project, which involves (us the vendor) asking our clients to insert a script tag on their home/origin site. The script tag is necessary for helping our clients go global, and part of the solution embodies a UI that gets triggered based on certain end user criteria.
The UI is built through the help of jQuery, which we really can't expect our clients to insert on their pages, not to mention version mismatches will be hard to resolve. Therefore, our third party library downloads its own jQuery version, albeit namespaced differently to avoid any conflicts.
However, such a mechanism requires us to rename all instances of jQuery to something that will help us avoid name clashes with another jQuery instance (if present), and makes the our mangled jQuery (MY_Query in examples below) very hard to manage, let alone upgrade.
For example
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
},
.
.
.
jQuery.fn = jQuery.prototype = ...
becomes
MY_JQuery = window.MY_JQuery = window.MY_Q = function( selector, context ) {
// The MY_JQuery object is actually just the init constructor 'enhanced'
return new MY_JQuery.fn.init( selector, context );
},
.
.
.
MP_JQuery.fn = MP_JQuery.prototype = ...
In an ideal world, both us and the client would have a single version of jQuery on the site, and we both would use it to our advantage. But that would mean an upgrade of jQuery would require heavy testing on both sides (while the mangled jQuery version is contained) and that any plugin wanted would require the client to add appropriate script tags to their site, spurring a political debate between the two parties on what versions win.
So, can I manage our jQuery version (with plugins) on a client site without having to rename all instances of jQuery with something like MY_Query with the constraints mentioned above?
Why not check to see if they have jQuery already included on the page and if not dynamically load it? If you know the base level jQuery needed you can check for that like this:
if( !jQuery || !jQuery.fn.jquery === "1.4.4"){
var url = "http://code.jquery.com/jquery-1.4.4.js";
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
You'd probably want to improve the version detection to make sure that it doesn't have a version after 1.4.4, but I'm sure you could write the code for that yourself ;-)
==== Edit based on feedback
So you need to maintain multiple versions of jquery on the page. Have you tried something like this:
var original_jquery = $().noConflict();
original_jquery.getScript("http://code.jquery.com/jquery-1.4.4.js");
var new_jquery = $().noConflict();
window.$ = original_jquery;
Then use the new_jquery as your version of jquery? I haven't tested this to see if it would work, but you might have some luck with it.
==== Final edit
As you mentioned, my javascript above wasn't exactly correct, so I tried out a few things in the console. And yes, you don't need to save the old version of jQuery because jQuery does that in the noConflict method. So just call getScript, then noConflict but saving to a new variable:
>> $.fn.jquery
"1.4.2"
>> $.getScript("http://code.jquery.com/jquery-1.4.4.js");
undefined
>> $.fn.jquery
"1.4.4"
>> var new_jquery = $.noConflict();
undefined
>> new_jquery.fn.jquery
"1.4.4"
>> $.fn.jquery
"1.4.2"
Have you tried to use JQuery.noConflict(). This sounds like it could help you.
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.