StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjoomla + jquery + prototype. Can't get noConflict to work.
text
Body
copied!<p>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.</p> <p>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.</p> <p>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):</p> <pre><code><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"/>  <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>  <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> </code></pre> <p>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.</p> <p>Any help would be greatly appreciated.</p> <p>Thank you</p> <p>EDIT:</p> <p>Ok so here's what I have now:</p> <pre><code><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> </code></pre> <p>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: <a href="http://www.2shared.com/document/Dz0_2rBD/jquerynivosliderpack.html" rel="nofollow">http://www.2shared.com/document/Dz0_2rBD/jquerynivosliderpack.html</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload