I want to ask is there any practical reason where jQuery.noConflict function is needed utmost?
In layman terms I am asking, what is the reason behind the evolution of this function?
You are using another library which also using $.
You have to use multiple versions of jQuery, mostly because the
plugins depends on different version of jQuery.
The jQuery library and virtually all of its plugins are contained within the jQuery namespace. As a general rule, global objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like prototype.js, MooTools, or YUI).
That said, there is one caveat: by default, jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
for E.g
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
you can read more here http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
Related
I am developing a new JS library. I want to include JQuery as core part of it.
My library is supposed to work on all kind of websites, so in those sites JQuery may be already included with different version , may have some other library which may conflict with JQuery inside my library.
jQuery.noConflict();
may not be a complete solution , since it will remove variables from the global scope. My library don't want to change any other settings by user.
So how can i avoid these issues
Conflict with other library ? ($ alias - may be jQuery.noConflict();).
Conflict with other versions of JQuery , if it is already included in the web page.
Thanks in advance. Please don't tell that not include JQuery , use normal JS :)
It's very simple.
First load your preferred jQuery, and get a handle to that by omitting any conflicts from already existing jQuery by using,
$yourJQ = window.jQuery.noConflict(true);
Use $yourJQ in a anonymous scope in all the functions that you want use your jQuery. Like this,
(function($){
// external library code
})($yourJQ);
Hope this helps
Also visit http://alexmarandon.com/articles/web_widget_jquery/
Well regardless of whether you remove variables from the global scope or not you will have to do a find & replace to change which library points at which version of jQuery; because they will either use $ or jQuery & conflict in the global scope, anyway. You could try something like this:
Load first version of jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function(window,$) {
window.jQuery_v1 = $;
})(window,jQuery);
delete jQuery;
</script>
Load second version of jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function(window,$) {
window.jQuery_v2 = $;
})(window,jQuery);
delete jQuery;
</script>
Use both versions of jQuery
<script type="text/javascript">
// this is now one version of jQuery
console.log(jQuery_v1);
// this is now another version of jQuery
console.log(jQuery_v2);
</script>
I have a project that requires a custom JavaScript library to be included in end user's websites. Sort of a third party thing, think JavaScript tracking like Google Analytics.
We'll have no control over what other JS libraries/frameworks might also be loaded or what versions.
I'd like to be able to leverage jQuery's event delegation, selector and AJAX functionalities but:
Not cause any conflicts with other libraries or other versions of
jQuery that might be loaded
Not require the end user to have to think
about including jQuery separately.
So, rolling in all of jQuery sort of seems like overkill but again, event delegation, selector and AJAX are required. I know jQuery's sizzel engine is broken out in such a way that it's possible to include it in 3rd party libraries and there are plenty of tiny AJAX libraries but we need good event delegation support as well. Additionally, I foresee us needing to do some heavy DOM lifting with this library in the near future as well so it's arguable we do need most of jQuery's functionality.
Any suggestions on how to encapsulate jQuery in such a way that we don't trample over anyone's code? Also, how advisable is this? It does feel a tad iffy.
Also, what's the best wat to encapsulate it into another library? Is there a better way than this?:
(function(window){
window.myNamespace = {
_jq:null,
init: function(){
// Include jQuery
myNamespace.setJq();
},
setJq:function(){
/*! jQuery v1.8.2 jquery.com | jquery.org/license */
(function(a,b){function G(a){...}}) // <- minified jQuery
// Stash a local copy of jQuery
myNamespace._jq = jQuery;
// Return $ and jQuery namespace
$.noConflict(true);
}
}
})(window)
(We intend on offering a version of the library without jQuery for those savvy enough to know that it's already loaded on their page and what version they're using)
Have a look at jQuery in Parts: https://github.com/mythz/jquip
What about dong a conditional load... Test if $ exists. If it does, don't load the script. If it doesn't, then load it.
You could use the following pattern to make sure that the jQuery is being passed in to the function and then you can map it to the local variable $ without issues.
(function(window,$){
//use $ as a local jQuery variable
})(window,jQuery);
My application's JavaScript uses jQuery and jQuery plugins and running in "hostile" environment I have no control over (this is PHP extension for eCommerce platform). Thus no way to determine whether my jQuery code will be executed before someone will attach his instance of jQuery/plugins (introduced by other extension) or after this or someone will load jQuery dynamically after page rendered.
Basically the problem is that other extension could use jQuery (with plugins) also and just connecting jQuery with tag will not work.
I have a strong feeling that RequireJS might help me to load needed version of jQuery as far as particular versions of jQuery plugins into the encapsulated scope without polluting global scope (so other extensions will still function properly). Then I'll wrap all my code to "require" statements and it will run using it's own set of jQuery and plugins. I tried this and it kind of works (have not tested this in production environment though) but in some weird way. Seems like this question is kind of relevant to problems I have. Also answer suggesting to use AMD-compatible version of jQuery. But what about plugins? I don't think all plugins I use have such versions.
So questions:
Could RequireJS be used to cover such use case (running jQuery+plugins in undefined environment)? If RequireJS could be used there then any example code or explanation of how to do this properly will be greatly appreciated.
If there is no way to cover this with RequireJS what do you think would be best approach to handle issue?
Yes, I believe RequireJS can help you out here. To my knowledge you'll have to do some legwork, though. Take a look at the source of the (as of 2012-08-19) latest jQuery: link. At the bottom you can see that window.jQuery is being set, defining jQuery and $. The define call for AMD loaders happens after that, so jQuery is in the global scope no matter what. What you want to do is guarantee that your own version of jQuery and plugins stay isolated from other jQuery instances and plugins, correct?
Place your custom jQuery and plugins into their own directory (let's call it "jqcustom") and use that directory when specifying dependencies in your scripts' define calls. You'll want to modify your version of jQuery by wrapping it in a define call and returning the jQuery object at the very bottom, taking out jQuery's window.jQuery and window.$ assignments as well as its default define call in the process (these are both at the bottom, remember). Then you'll need to wrap all of your plugins in define calls and specify your own version of jQuery as the dependency. Example:
define(['jqcustom/jquery'], function(jQuery) {
//inside this method 'jQuery' will override any predefined global window.jQuery
//in case any plugins use the $ variable, define that locally too
var $ = jQuery;
//... plugin code ...
});
If you use RequireJS' optimizer, it can do the wrapping of the plugins for you with its shim config options. jQuery plugins work by adding methods to jQuery's prototype object, so I believe as long as you pass the same jQuery (your custom jqcustom/jquery one) to every plugin with your define wrapping, the plugins' extensions will all be set on the same object and be accessible in subsequent define calls specifying your custom jQuery or custom plugins as dependencies. Good luck!
I am in big trouble at the moment. We have a huge JS library that I need to maintain. It uses internally jQuery 1.6.2.
The client where we installed the library uses jQuery 1.3.4 and the fancybox overlay plugin.
After loading these two, he simply throws in a
jQuery.noConflict();
but without saving his jQuery to a variable (namespacing).
Now I need to access his fancybox, but if I use
$.fancybox({...})
or
jQuery.fancybox({...})
I get in both cases an "is not a method error".
I can duplicate the error on my local machine and it would not appear without the jQuery.noConflict(); statement.
We are also doing a noConflict with our jQuery but we save it to another varieable, i.e.
jq162 = jQuery.noConflict();
The problem is the customer is of course unwilling to change anything of his code.
Is there any way how I can access his jQuery / Fancy after this statement and after loading our 1.6.2?
thanks in advance...
UPDATE
the scripts are loaded in the following order:
// client
jquery 1.4.2
jquery fancybox
<script type="text/javascript"> jQuery.noConflict(); </script>
jQuery 1.2.6 which seems to be necessary for Liferay
// now comes my library
jQuery 1.6.2
my scripts
i know, if we could change step 3 to
<script type="text/javascript"> $jq = jQuery.noConflict(); </script> it would work, but right now that is out of my influence.
in 6. myscripts I need to access the fancybox from 2.
any ideas?
It shouldn't be a problem. You must be loading your scripts after the client's scripts (if you're loading yours first, there shouldn't be any problem, your jquery is namespaced, and the clients version will be in jQuery along with the plugin).
So simply namespace his jQuery object before you load your script:
<script>
jq132 = jQuery;
</script>
<script src="yourScripts"></script>
<script>
jq162 = jQuery.noConflict();
console.log(jq132.fancybox);
</script>
UPDATE
As per your update, what you're trying to do is impossible. There is no longer a reachable reference to that jQuery/plugin instance (unless fancybox accidentally leaked a global reference, which I highly doubt). I don't know fancybox, although it's possible that the functionality isn't instance-specific. So it may be possible to just reattach fancybox to your version of jquery, and it will be able to perform all the necessary things. What I said about the reference however, remains true.
Obviously adding a few characters like you suggested (or other similar ways) would solve the problem. But if that is impossible, then your client will have to realise that. It should be proof enough if you simply ask them to access there own plugin under the same conditions - i.e. without changing code.
They should probably have a long and hard think about their entire project. Having to load three different versions of the same product is a sign that something is very very wrong.
I'm building a service that allows people to put a javascript code I gave them to their site.
The javascript code is based on jQuery.
My question is how to do this to be safe and optimized, cause I don't want to break certain users website.
The thing I'm looking for so far( you can update if you think I need to face other problems):
what happens when the user already has jquery loaded on their page? should I load my jquery library using different namespace or should I use his jquery library.
in case I can use his jquery library, I think I'll need to check to see if the versions corespond, but again is this safe?
in case I want to use his jquery library, how do I check if he has jquery loaded and if he has the right version
this is related to 3. what happen if he changes his jquery library that doesn't correspond with the library I think it will be, leading to a bad result.
Looking for your answers.
Thanks
Don't depend on the page's jQuery or try to use it. This will just turn into a support nightmare. You can't even be sure that a version is accurate, as the target page can alter its version of jQuery.
The best approach is for your code to create and load an iFrame. This gives you complete control over the iFrame's jQuery, CSS, etc. With vastly reduced chances of conflict.
If the iFrame approach is not possible for some reason, Use noConflict to minimize the chance of conflicting jQuery versions.
Something like this:
<script type="text/javascript">
if ($ || jQuery) {
var PagesLibrary = $;
var PagesjQuery = jQuery;
</script>
<!-- load your jQuery -->
<script type="text/javascript" src="http://example.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
var my_jQuery = $.noConflict (true);
if (PagesjQuery) {
$ = PagesLibrary;
jQuery = PagesjQuery;
}
</script>
Then instead of $('#selector').function();,
Use: my_jQuery('#selector').function();.
Without the context of actually what your injected code does, it's hard to say. If you're writing a general bit of functionality, you probably want to just implement it as a jQuery plugin, specify what version you target, and then leave it to your users to decide how to include it, etc.
However, it sounds more like you're writing a service of some kind. In that case, I recommend the following course:
Place all the code you depend on (jQuery, other libraries, your code, etc) in an anonymous function wrapper, and have the snippet you have people just inject a script tag pointing to your js file. This is most likely to give you reliable results. If you require special information, like an ID, have the snippet just before the injection code set those values in a global variable, or have extra code that runs just after the injection to call a function of yours with the data. Look at how Google Analytics accomplishes this for reference. Either way, you'll need to affect the global scope.
I know that may not be what you wanted to hear. You could always create an elaborate jQuery detection and injection scheme, but you'd run into exactly the problems you mention (like version collisions etc). The safe way to go is to combine all the code you require along with your own and provide it all as one file which only makes internal references.
Hope this helps!