问题
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?
回答1:
Open your jquery.x.x.x.js file and add this to the very bottom of it:
jQuery.noConflict();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.
回答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 );
回答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!
回答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.
来源：https://stackoverflow.com/questions/19661610/jquery-conflicting-with-prototype-magento-how-can-i-separate