How do I remove jQuery Conflict in prototype.js with 1.11.1.jquery.min.js

Question

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?

Answer 1

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 $.

Answer 2

Include the jquery.noConflict in the app/design/frontend/default/[theme name]/template/page/html/head.phtml file like this:

<script type="text/javascript">
  $.noConflict(); //Use no conflict here instead of js file
  // Code that uses other library's $ can follow here.
</script>

See details via following link: http://api.jquery.com/jQuery.noConflict/

Answer 3

In the file jquery-1.11.1.js, add jQuery.noConflict(); at last.