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.
Â
Contents
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="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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 the browser console, you will see Uncaught TypeError that say $(...).ready is not a function.
With the next script, you can overcome this type of error.
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
jQueryin 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.
