Avoid jQuery conflicts with other libraries

jQuery Cookie

jQuery uses $ as a alias or shortcut. So if you use another javascript library (like prototype, mootools etc) that uses same alias then you are in a jQuery conflicts situation.

Use no-conflict mode to avoid jQuery conflicts:

You have to use a new variable name to replace with jQuery $.
For e.g.

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
var $myjq = jQuery.noConflict();
$myjq(document).ready(function() {
    $myjq( "div" ).hide();
});
</script>

To know more about jQuery Conflict, click here.

Immediately Invoked Function Expression:
Here is another pattern where you can use $ by wrapping your code in invoked function expression.

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
    // Write your jQuery here using $
})( jQuery );
</script>

Must Read: Steps to take when jQuery is not working

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

Leave a Reply

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