JQuery not working correctly, possible conflicts with Prototype?
I'm sorry for the vague title.
I am creating a new theme for my website and I have both jQuery tabs and a slider on the page.
Both tabs and slider are not working, although I'm not sure why. I inherited the design and just changed the theme - I think it might have something to do with a couple of jQuery scripts that are being loaded - the slider throws an error that the method .split()
doesn't exist and the tabs just don't work as they should.
source to share
You must do this:
<action method="addJs"><script>jquery/jquery.js</script></action>
<action method="addJs"><script>jquery/jquery.plugin.js</script></action>
<action method="addJs"><script>jquery/jquery.moreplugin.js</script></action>
<action method="addJs"><script>jquery/jquery.noConflict.js</script></action>
<action method="addJs"><script>prototype/prototype.js</script></action>
in the page.xml layout.
Jquery.noConflict.js file:
var jQuery = $.noConflict();
After that, you can call the jQuery () function wherever you want. Order: jquery -> jquery plugin -> jquery no conflict -> prototype
source to share
Blasting pills are correct - you have to use jQuery.noConflict. Import jQuery first, before importing Prototype, insert the line
<script type="text/javascript">
jQuery.noConflict();
</script>
If you do this, everywhere in your application where you reference jQuery, do jQuery(...)
either jQuery.
instead of $(...)
or $.
. This shouldn't mess up your import script, unless those scripts you are importing are poorly written and don't define $ for themselves.
source to share
I prefer to use the following snippets:
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$.ajax(...);
})(jQuery);
</script>
which will not conflict with Prototype and will use '$' for jQuery. Here's some more information: http://www.magentogarden.com/blog/using-jquery-in-magento-with-good-programming-practice.html
source to share