Magento – How to remove jQuery Conflict in prototype.js with 1.11.1.jquery.min.js

javascriptjquerymagento-1.9

I have a conflict between jQuery and another library. I added the code below to the local.xml file as per answers found here.

<?xml version="1.0"?>
<layout>
    <default>
             <reference name="head">
    <action method="addJs" name="jquery" as="jquery">
        <script>jquery-1.11.1.js</script>
    </action>
    <action method="addJs">
        <script>noconflict.js</script>
    </action>
</reference>
</default>
</layout>

The answer said that the noconflict.js file should simply contain the following code.

$j = jQuery.noConflict();

I do not understand where I have to add the noconflict.js file. Is it to the js folder on the server? If the answer is yes, how do I create a JavaScript file?

Best Answer

You can always bypass the noConflict() method by wrapping your jQuery in an IIFE: http://benalman.com/news/2010/11/immediately-invoked-function-expression/.

(function($){
    //use your jQuery code here
})(jQuery);

OR just use jQuery instead of $.

Related Topic