How to avoid jQuery conflict with other JS libraries

By default, jQuery uses $ as an alias for jQuery because of this reason sometimes it conflicts with other JS libraries if they are also using $ as a function or variable name.

In this tutorial, I show some of the ways by using them you can avoid jQuery conflict with any other JS libraries.

How to avoid jQuery conflict with other JS libraries


Contents

  1. Problem
  2. jQuery as Alias
  3. noConflict()
  4. Declaration
  5. Demo
  6. Conclusion

 


 

1. Problem

Here, I used jQuery and prototype.js libraries on the page.

Using prototype.js and protoplasm.js to add timepicker on the textbox element and on button click show the textbox value in <span> element with jQuery.

Completed Code

<head>

 <script src="jquery-3.1.1.min.js" language='javascript'></script>
 <script src='prototype.js' language='javascript'></script>
 <script language="javascript" src="protoplasm/protoplasm.js"></script>
 <script language="javascript">
 Protoplasm.use('timepicker').transform('input.timepicker');
 </script>
 
</head>
<body >
 <input type="text" name="time" id="time" class="timepicker" value='00:00:00' /><br>
 <input type='button' value='Click' id='getTime'><br>
 <span id='result'></span>

 <script type="text/javascript">

 $(document).ready(function(){
 
  $('#getTime').click(function(){
 
   var time = $('#time').val();

   $('#result').text(time);
  });
 });
 
 </script>
</body>

When it will be run then prototype.js works fine but jQuery not. On browser console, you will see Uncaught TypeError that say $(...).ready is not a function.

How to avoid jQuery conflict with other JS libraries

Output

With below script, you can overcome this type of errors.


 

2. jQuery as Alias

First, try to use jQuery instead of $ as the alias.

Example

jQuery(document).ready(function(){
 
 jQuery('#getTime').click(function(){

  var time = jQuery('#time').val();
  jQuery('#result').text(time);

 });
});

If that doesn’t work for you then use the next scripts.


 

3. noConflict()

After defining jQuery.conflict() you can no longer simply use $ with jQuery because whenever you use $ it refers to other JS libraries.

You can either –

  • Use jQuery in the place of $,
  • Pass $ as an argument on ready state declaration,
  • Create new Alias.

Syntax –

jQuery.noConflict();

Using $ as argument

jQuery.noConflict();
jQuery(document).ready(function($){
 
 $('#getTime').click(function(){
 
  var time = $('#time').val();

  $('#result').text(time);
 });
});

Create new Alias

Create new alias using jQuery.noConflict() method and use it in the place of $.

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
 $j('#getTime').click(function(){
 
  var time = $j('#time').val();

  $j('#result').text(time);
 });
});

 

4. Declaration

Change jQuery ready state declaration.

Syntax –

jQuery(document).ready(function($){
 
   // Code

});

OR

(function($){

  // Code

})(jQuery);

Using both of the above syntaxes you can still use $ for jQuery but within the function. If you $ outside of declaration then that will refer to other JS library.

Example

(function($){
 
 $('#getTime').click(function(){
 
  var time = $('#time').val();

  $('#result').text(time);
 });

})(jQuery);

 

5. Demo


 

6. Conclusion

If you want to use other JavaScript libraries along with jQuery and don’t want any conflict then use any other Alias instead of $ using jQuery.noConflict or change jQuery ready state declaration.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *