Jquery conflicting with prototype magento - How can i separate?

Question

I can't seem to be able to separate jQuery from Prototype with my Magento website.

I've got it working on JsFiddle using changed tags etc but when i add it to my magento site, i keep getting uncaught syntax errors.

Page is at http://www.asg.co.uk/gadgetclinic/how-it-works

Code i'm working with is:

<script type="text/javascript">
// First hide them all

$j("#how-it-works .step").hide();

function fades($j.step) {    
    $j div.fadeIn(300, function () {
            if (!$j div.is('last-child')) {
                fades($div.next());
            }
            else{
                fades($j("#how-it-works .step:first-child"));
            }
    });
}

fades($("#how-it-works .step:first-child"));
</script>

HTML Code is:

<div id="how-it-works">
<img src="{{skin url="images/how-it-works.png"}}" alt="How It Works" />
<div class="step"><h3>Get your box</h3><p>We'll send a suitably sized, pre-paid postage box for your device.</p></div>
<div class="step"><h3>Post your device</h3><p>Safely pack your device in your postage box and return it to us.</p></div>
<div class="step"><h3>Repair in process</h3><p>We will update you if need be whilst your device is repaired.</p></div>
<div class="step"><h3>Get your device</h3><p>Your device will be returned using the service you selected.</p></div>
</div>

Can anyone help me systematically help put all the required $ tags into $j or whatever is needed to separate jQuery from Prototype?

Answer 1

1. Open your jquery.x.x.x.js file and add this to the very bottom of it: jQuery.noConflict();

2. Then for your custom jQuery code, use the following:

   jQuery(function($){
   // Use jQuery with $(...)
   
       $('#mySelector').hide();
   
       /* your jquery code....*/
   
   });
   

That is how I implement jQuery with Magento. I prefer to use the $ for the jQuery instance as it's clean and familiar. The above code wrapper allows you to do this.

Answer 2

Usually jQuery no conflict is used

Edit So the best way for you is to use noconflict + (function ($j) { ... // your code here }(jQuery));

Edit2 3 examples how to use it

1

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {
    // you can keep using $j
    $j( "div" ).hide();
});

2

jQuery.noConflict();

jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    // or change $ above to $j
    $( "div" ).hide();
});

3

jQuery.noConflict();

(function( $ ) {
    // Your jQuery code here, using the $
    // or just chane $ to $j if you want
})( jQuery );

Answer 3

I managed to get it working using the following:

 jQuery.noConflict();

jQuery( document ).ready(function( $ ) {
// You can use the locally-scoped $ in here as an alias to jQuery.
// or change $ above to $j
$( "#how-it-works .step" ).hide();

$('.step').each(function( index ) {
$(this).delay( index * 700 ).fadeIn();
});
});

A combination of several posts on here. Seems to be really simple and lightweight. Thanks for everyone's help!

Answer 4

Okay I have found a way to make prototype, jQuery and bootstrap work without interfering with each other and without using jQuery.noConflict(). My layout setup (page.xml) was following(stripped for easier read):

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
</block>

I was getting errors like following:

TypeError: element.attachEvent is not a function

element.attachEvent("on" + actualEventName, responder);

TypeError: element.dispatchEvent is not a function

element.dispatchEvent(event);

I did not want to change $ everywhere. So, I made three javascript files as follows:

proto_to_temp.js having following code:

var $tempPrototypeDollar = $;

after_jquery.js having following code:

$ = jQuery;

after_all.js having following code:

$  = $tempPrototypeDollar;

As you can probably guess already, the first script assigns current $ variable (owned by prototype) to a temporary variable called $tempPrototypeDollar. Second script simply assigns jQuery to $. Third script assigns the content of $tempPrototypeDollar back to $.

I included these three scripts in the following order:

<block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>scriptaculous/builder.js</script></action>
    <action method="addJs"><script>scriptaculous/effects.js</script></action>
    <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
    <action method="addJs"><script>scriptaculous/controls.js</script></action>
    <action method="addJs"><script>scriptaculous/slider.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>
    <action method="addJs"><script>varien/form.js</script></action>
    <action method="addJs"><script>varien/menu.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>mage/cookies.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/proto_to_temp.js</script></action><!-- First Script goes just before jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/jquery.min.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_jquery.js</script></action><!-- Second Script goes just after jQuery include-->
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/bootstrap.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/responsive-tabs.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/clickable.js</script></action>
    <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    <action method="addJs"><script>buzzthemes/buzz-intro/bootstrap/site.js</script></action>
    <action method="addJs"><script>buzzthemes/buzz-intro/conflict/after_all.js</script></action><!-- Third Script goes after all related code has been included -->
</block>

This solved all the problems for me and now jquery, bootstrap and prototype, all seem to work fine.