27

I am using both javascript and jquery code on the same html page. For some reason, the jQuery library is stopping my native javascript code from working properly.

I found this page: jQuery No Conflict that says you can use a jquery.noConflict to release $ back to javascript. However, I'm not sure how to do this?

Specifically, I'm not sure how to implement this correctly? Where does the the Jquery code go, where does the JS code go?

My code is below:

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
1

13 Answers 13

39

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>
14

By default, jquery uses the variable jQuery and the $ is used for your convenience. If you want to avoid conflicts, a good way is to encapsulate jQuery like so:

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)
1
  • Just to add a little further clarification to this: the inner $(function()){...}); is shorthand for the jQuery DOM ready function: $('document').ready(function() {...}); and it is the (function($){...})(jQuery) that is performing the encapsulation in an IIFE - the global jQuery object is passed as a parameter and the $ is then becomes locally scoped. Jun 7, 2019 at 11:27
3

If I'm not mistaken:

var jq = $.noConflict();

then you can call jquery function with jq.(whatever).

jq('#selector');
1
  • What about external jquery libraries, that use the $ symbol though
    – Qasim
    Dec 10, 2020 at 5:37
2

It's typically used if you are using another library that uses $.

In order to still use the $ symbol for jQuery, I typically use:

jQuery.noConflict()(function($){
  // jQuery code here
});
1

It allows for you to give the jQuery variable a different name, and still use it:

<script type="text/javascript">
  $jq = $.noConflict();
  // Code that uses other library's $ can follow here.
  //use $jq for all calls to jQuery:
  $jq.ajax(...)
  $jq('selector')
</script>
1

If you look at the examples on the api page there is this: Example: Creates a different alias instead of jQuery to use in the rest of the script.

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Put the var j = jQuery.noConflict() after you bring in jquery and then bring in the conflicting scripts. You can then use the j in place of $ for all your jquery needs and use the $ for the other script.

0

In addition to that, passing true to $.noConflict(true); will also restore previous (if any) global variable jQuery, so that plugins can be initialized with correct jQuery version when multiple versions are being used.

0
0

You simply assign a custom variable for JQuery to use instead of its default $. JQuery then wraps itself in a new function scope so $ no longer has a namespace conflict.

<script type="text/javascript">
    $jQuery = $.noConflict();
    // Other library code here which uses '$'
    $jQuery(function(){ /* dom ready */ }
</script>
0

The noConflict() method releases the $ shortcut identifier, so that other scripts can use it for next time.

Default jquery $ as:

// Actin  with $
$(function(){
    $(".add").hide();
    $(".add2").show();
});

Or as custom:

var j = jQuery.noConflict();
 // Action with j
j(function(){
    j(".edit").hide();
    j(".add2").show();
});
0
<script src="JavascriptLibrary/jquery-1.4.2.js"></script>
    <script>
         var $i = jQuery.noConflict();
      // alert($i.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery-1.8.3.js"></script>
    <script>
        var $j = jQuery.noConflict();
      //alert($j.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery.colorbox.js"></script>

    <script src="Js/jquery-1.12.3.js"></script>
    <script>
        var $NJS = jQuery.noConflict();
    </script>

You can do it like this:

<script>
   $i.alert('hi i am jquery-1.4.2.js alert function');
   $j.alert('hi i am jquery-1.8.3.js alert function');
 </script>
0

Today i have this issue because i have implemented "bootstrap menu" that uses a jQuery version along with "fancybox image gallery". Of course one plugin works and the other not due to jQuery conflict but i have overcome it as follow:

First i have added the "bootstrap menu" Js in the script footer as the menu is presented allover the website pages:

<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>

And in the "fancybox" image gallery page as follow:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

And the good thing is both working like a charm :)

Give it a try :)

0

I fixed that error by adding this conflict code

<script type="text/javascript">
 jQuery.noConflict(); 
</script>

after my jQuery and js files and get the file was the error (found by the console of browser) and replace all the '$' by jQuery following this on all error js files in my Magento website. It's working for me good. Find more details on my blog here

0
/* The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. */

 var jq = $.noConflict();
    (function($){
      $('document').ready(function(){
        $('button').click(function(){
          alert($('.para').text());
        })
      })
    })(jq);

Live view example on codepen that is easy to understand: http://codepen.io/kaushik/pen/QGjeJQ

1
  • You need to post the code here and not give a link to external source as there is no guarantee the source will be available in future for others see.
    – AJS
    Nov 16, 2016 at 6:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.