joomla + jquery + prototype. Can't get noConflict to work.

Question

I am working on a site that uses a bridge for joomla and magento called Magebridge. I've started developing a joomla template that uses some jquery for things like a NivoSlider on the homepage and tooltips. When I use this template on a normal joomla site it works fine, but when I use the bridge which brings Prototype into the mix I get errors and other unhappy stuff.

Now after searching around it seems the general solution to this would be to use jquery in noconflict mode, which I've now tried in a number of different ways but can't seem to get it to work.

I'm using jquery in a combination of inline scripts and external .js files. Looking at the final source code for the site I can see that protoype is being called before jquery (here's part of the head section):

<head>
  <base href="http://127.0.0.1/meade/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />
  <title> Home page </title>
  <link href="http://127.0.0.1/meade/component/search/?format=opensearch" rel="search" title="Search Meade Instruments" type="application/opensearchdescription+xml" />
  <link rel="stylesheet" href="/meade/media/com_magebridge/css/default.css" type="text/css" />
  <link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/styles.css" type="text/css" media="all"/>
  <!--[if lt IE 8 ]>
<link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/styles-ie.css" type="text/css" media="all"/>
<![endif]-->
  <link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/base/default/css/widgets.css" type="text/css" media="all"/>
  <link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/print.css" type="text/css" media="print"/>
  <script type="text/javascript" src="/meade/media/com_magebridge/js/footools.min.js"></script>
<script  type="text/javascript">
//<![CDATA[
var BLANK_URL = 'http://127.0.0.1/store.meade/js/blank.html';
var BLANK_IMG = 'http://127.0.0.1/store.meade/js/spacer.gif';
//]]>
</script>
  <script type="text/javascript" src="http://127.0.0.1/store.meade/js/index.php?c=auto&amp;f=,lib/ccard.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js"></script>
  <!--[if lt IE 7 ]>
<script type="text/javascript" src="http://127.0.0.1/store.meade/js/lib/ds-sleight.js"></script>
<![endif]-->
  <script type="text/javascript" src="http://127.0.0.1/store.meade/skin/frontend/base/default/js/ie6.js"></script>
  <script type="text/javascript">var Translator = new Translate({"Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.":"Please use only letters (a-z or A-Z), numbers (0-9) or underscores (_) in this field, first character must be a letter."});</script>

<link rel="stylesheet" href="/meade/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/meade/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/meade/templates/Meade/css/style.css" type="text/css" />
<link rel="stylesheet" href="/meade/templates/Meade/css/nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="/meade/templates/Meade/nivo-slider/themes/default/default.css" type="text/css" />
<script type="text/javascript" src="/meade/templates/Meade/js/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="/meade/templates/Meade/js/jquery.nivo.slider.pack.js"></script>

Now i've tried whats on the official jquery site which is adding jQuery.noConflict(); and then replacing all the $( in the external .js files i've added with jQuery(, as well as in some of the inline jquery that I wasn't able to paste into here for some reason. But that didnt work, I also tried another variation of that with jQuery.noConflict(); and (function($) { $(function() { but couldnt seem to get that to work either. So I guess I just don't know if im making a stupid syntax mistake or if my understanding of how to use noConflict mode is completely off in general.

Any help would be greatly appreciated.

Thank you

EDIT:

Ok so here's what I have now:

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {

    jQuery('#slider').nivoSlider({
        effect:'boxRainGrowReverse',
        controlNavThumbs:true,
        prevText: ' ',
        nextText: ' ',
        pauseTime: 4000
    });

});
</script>

I'm still getting stack overflow errors and object not supported errors. Ive taken a look in the nivoslider js file and it looks like it's protecting the $ symbol already. If you think it may be a part of that file you can find it here: http://www.2shared.com/document/Dz0_2rBD/jquerynivosliderpack.html

Can you provide more information as to what exactly is not working? I don't see a call to jQuery.noConflict(), and as the referenced files aren't public, there is no way to see what exactly is or is not happening. — bstakes
why are you not getting nivo from nivo? nivo.dev7studios.com — Sinetheta
I did, I just wanted to make it easier for people who didnt want to download the whole thing. The link i gave is just the .js file — Griffin

Sinetheta Sinetheta · Accepted Answer · 2011-07-28T21:43:47

Where have you added noConflict? Only Jquery that you write needs to be altered to refer the the jQuery object by it's full name (or an alias like $j). Any properly built plugin will already have protected the dollar sign. Just follow the jQuery docs if you need to add your own scripts to the page.

<script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
   </script>

EDIT ADDITION TO REFLECT EDITED POST:

Yes, you have now included jQuery properly in noConflict mode, so you need to write YOUR calls with "jQuery" instead of "$".

Once you're inside a jQuery call, you can have the dollar sign back if you'd like, but you have to ask for it from the "function".

jQuery(window).load(function($) {
    $('#slider').nivoSlider({

joomla + jquery + prototype. Can't get noConflict to work.

1 Answers