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>
Related
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/
I'm scraping a news website with PHP and injecting the Jquery library in the head, along with my own script which depends on Jquery. I have experienced some loss of functionality regarding some websites. So I was wondering if it would be possible to make the Jquery library function only for my script and thus not "assimilating" itself with other scripts on the page.
I have Googled for this but all I can find is Jquery noConflict() but it doesn't get the job done.
jQuery noConflict is the way to go but remember you will need to name your no conflict copy and then use this copy of jQuery for your code:
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
See more here: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
What about editing jQuery library itself so it is called something else.
Embed the jQuery object via PHP to not have this huge chunk of jQuery code (more readable if you can inject with PHP, but not required, or use a script tag that points to your server).
Customize jQuery to be not "jQuery" or "$".
Then, to customize jQuery, download jQuery and look at the very bottom, it says:
// Add your customized jquery here
window.jQuery = window.$ = jQuery;
Change this line to something else:
// Expose jQuery to the global object
window.myQuery = window.$$$$$$$$$ = jQuery;
I am using RequireJS and Angular but they are not working together in my set up. Things work fine when jQuery version is 1.7.2. However I wanted to use jQuery 1.8.1 and jQuery UI and angular app even fails to initialize the my main module with this.
Here is the problem:
Case sensitive variables: jQuery and jquery. In jquery 1.8.1 source code, towards the end they have defined window.jQuery. Where as in earlier version 1.7.2 had window.jquery defined.
Since I want to use jQuery UI in my app included the file jquery-ui-1.8.23.custom.min.js. After including it I got the error that "jQuery" is undefined.
So, I decided to upgrade my jQuery version and downloaded the said 1.8.1 version. Towards the end of the jQuery source code I could see that this version defined window.jQuery (correct case as needed by jQuery UI).
I updated my require-jquery JS with latest version from James Burke github project and updated it with jquery 1.8.1.
But including the updated jQuery/RequireJS project, angularjs has stopped working.
I get this error in Chrome console:
If I revert to 1.7.2 angular works. Or if I edit jQuery file to define window.jquery instead of window.jQuery (note the case) it again works. But that means jQuery UI won't.
Using jQuery's noConflict method is a more elegant and future proof solution to this problem.
View extensive documentation on http://api.jquery.com/jQuery.noConflict/
UPDATE (example from the link):
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
I fixed this solution by removing the line from jQuery source which made $ and jQuery the global variables. This line looks something like window.jQuery = window.$ = jQuery.
If you are also using AngularJS with RequireJS and are facing similar problem, remove these lines.
Furthermore, you will have to use jqueryui-amd in your project. Download the utility from the Github page and it will convert jQuery UI script to AMD modules.
Using the AngularJS feature called 'directives' to extend HTML elements I was able to use jQuery UI components in reusable and sane manner.
I've to say that I've hated and loved AngularJS while working on my project, sometimes even letting everybody on Twitter know that I hate AngularJS. However, after having implemented and finished two projects over the last month I have fairly good idea on when to use it and when not to use it.
Here is one jsFiddle I've created to demonstrate the use of jQuery UI with AngularJS:
http://jsfiddle.net/samunplugged/gMyfE/2/
Easily fixed this after my two days try..
When try
Include the particular Slider Jquery files to the view.html directly. remove jquery from index.html file
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've got the following situation
A rails application that makes use of rjs / Scriptaculous to offer AJAX functionality
Lot of nice javascript written using jQuery (for a separate application)
I want to combine the two and use my jQuery based functionality in my Rails application, but I'm worried about jQuery and Scriptaculous clashing (they both define the $() function, etc).
What is my easiest option to bring the two together? Thanks!
jQuery.noConflict();
Then use jQuery instead of $ to refer to jQuery. e.g.,
jQuery('div.foo').doSomething()
If you need to adapt jQuery code that uses $, you can surround it with this:
(function($) {
...your code here...
})(jQuery);
I believe it's jQuery.noConflict().
You can call it standalone like this:
jQuery.noConflict();
jQuery('div').hide();
Or you can assign it to another variable of your choosing:
var $j = jQuery.noConflict();
$j('div').hide();
Or you can keep using jQuery's $ function inside a block like this:
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
For more information, see Using jQuery with Other Libraries in the jQuery documentation.
jRails is a drop-in replacement for scriptaculous/prototype in Rails using the jQuery library, it does exactly what you're looking for.