javascript - Jquery conflicting with prototype magento - How can i separate? - Stack Overflow

admin管理员组

文章数量:1410730

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

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?

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?

• javascript
• jquery
• magento
• prototype
• conflict

Share Follow asked Oct 29, 2013 at 14:52 Lee CollingsLee Collings 3911 gold badge33 silver badges1212 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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.

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 );

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 bination of several posts on here. Seems to be really simple and lightweight. Thanks for everyone's help!

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.

本文标签： javascriptJquery conflicting with prototype magentoHow can i separateStack Overflow