How to Implement Jquery.Noconflict()

How do I implement JQuery.noConflict() ?

jQuery.noConflict will reset the $ variable so it's no longer an alias of jQuery. Aside from just calling it once, there's not much else you really need to do. Though, you can create your own alias with the return value, if you'd like:

var jq = jQuery.noConflict();

And, generally, you want to do this right after including jQuery and any plugins:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>

You can also go one step further and free up jQuery with noConflict(true). Though, if you take this route, you'll definitely want an alias as neither $ nor jQuery will probably be what you want:

var jq = jQuery.noConflict(true);

I think this last option is mostly used for mixing versions of jQuery, particularly for out-dated plugins when you want to update jQuery itself:

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
    var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>

how to use jquery.noConflict property

After you include jQuery, add the following in a script tag immediately after it.

<script> 
jQuery.noConflict();

jQuery(document).ready(function() {
alert('hi');
});
</script>

Also place your jQuery script before your mootools library. Order will be:

jQuery script include

noConflict code

mootools script include

How to properly use jQuery noConflict mode in Wordpress

I always used jQuery like this in wordpress and it's working for me I hop this is working for you.

(function($){

  $(document).ready(function(){
      // write code here
  });

  // or also you can write jquery code like this

  jQuery(document).ready(function(){
      // write code here
  });

})(jQuery);

How to use jQuery noconflict?

You have a $('body').zoom({ }) at the end of the second file, this have to be changed to jQuery('body').zoom({ }).

Your self executing anonymous function does not cover this piece of code.

Why we have to use $.noConflict() in jQuery?

Here you got detailed information about why:

Many JavaScript libraries use $ as a function or variable name, just
as jQuery does. In jQuery's case, $ is just an alias for jQuery, so
all functionality is available without using $. If you need to use
another JavaScript library alongside jQuery, return control of $ back
to the other library with a call to $.noConflict(). Old references of
$ are saved during jQuery initialization; noConflict() simply restores
them.

It's from jQuery and there is even more information: https://api.jquery.com/jquery.noconflict/

Update after comment

From jQuery code https://code.jquery.com/jquery-1.10.2.js if you search for noConflict you will find

noConflict: function( deep ) {
        if ( window.$ === jQuery ) {
            window.$ = _$;
        }

        if ( deep && window.jQuery === jQuery ) {
            window.jQuery = _jQuery;
        }

        return jQuery;
    },

In simple: This checks if global $ or global jQuery has already been used. Either way it will return jQuery. So you can not just do var $j=$; cause $ may already has conflicts. The noConflict() is what you need.

JQuery noConflict running two versions

As jQuery API says so,

If for some reason two versions of jQuery are loaded (which is not recommended by jQuery API),
calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.

<script src="other_lib.js"></script>
<script src="jquery.js"></script>

<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

This technique is especially effective in conjunction with the .ready() method's ability to alias the jQuery object, as within callback passed to .ready() you can use $ if you wish without fear of conflicts later:

<script src="other_lib.js"></script>
<script src="jquery.js"></script>

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

In one project I've used it as

var j = jQuery.noConflict();
// Do something with jQuery
j( "div p" ).hide();

Also like this

jQuery.noConflict();
  (function( $ ) {
    $(function() {
    // More code using $ as alias to jQuery
   });
})(jQuery);

I hope this helps.

---

Related Topics