CODEWITHSUNDEEP
javascriptjquerymagentoprototype
Ben Harris
Ben Harris

Reputation: 1793

jQuery not working right, possible conflicts with Prototype?

I'm sorry for the vague title.

I'm making a new theme for my company's website, and I've got both jQuery tabs and a slider on the page.

Both the tabs and slider aren't working though - I'm not too sure why. I inherited the design and simply changed the theme - I'm thinking it might have something to do with multiple jQuery scripts being loaded - the slider throws an error that the method .split() doesn't exist, and the tabs just don't work the way they should.

Upvotes: 3

Views: 634

Answers (3)

Allen Koo
Allen Koo

Reputation: 2096

I prefer to use the following snippets:

<script type="text/javascript">
  jQuery.noConflict();
  (function($) {
    $.ajax(...);
  })(jQuery);
</script>

, which won't conflict with Prototype and remain to use '$' for jQuery. Here's some more information: http://www.magentogarden.com/blog/using-jquery-in-magento-with-good-programming-practice.html

Upvotes: 0

Lan Nguyen
Lan Nguyen

Reputation: 465

You should 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 page.xml layout.

jquery.noConflict.js file:

var jQuery = $.noConflict();

After that you can call jQuery() function everywhere you wish. The order is: jquery -> jquery plugin -> jquery no conflict -> prototype

Upvotes: 2

Nathan Wallace
Nathan Wallace

Reputation: 2244

Explosion Pills is right -- you should use jQuery.noConflict. Import jQuery first, then, before you import Prototype, insert the line

<script type="text/javascript">
    jQuery.noConflict();
</script>

If you do that, everywhere else in your app where you reference jQuery, do jQuery(...) or jQuery. instead of $(...) or $.. It shouldn't mess up your script imports unless those scripts you're importing are written badly and don't define $ for themselves.

Upvotes: 2

Related Questions