1

I'm trying to build a Bootstrap-based theme, and have been tearing my hair out trying to get jQuery to work with the the other libraries that are included. I've tried various methods that I've run across to resolve conflicts between all of the libraries, but none of them seem to work (I don't remember what I've tried now -- it's been a few weeks). As far as I can tell, the prototype scripts are working, but the jQuery scripts are not (specifically, the menu drop-downs). Here is the relevant source code from the header:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
...
<script type="text/javascript" src="http://localhost:8888/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/varien/js.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/varien/form.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/varien/menu.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/mage/translate.js"></script>
<script type="text/javascript" src="http://localhost:8888/js/mage/cookies.js"></script>

Here is the source code for my drop-down menu:

<div class="nav-collapse collapse">           
    <ul class="nav main-nav">
         <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="http://localhost:8888/index.php/on-the-scene.html">On the Scene <b class="caret"></b></a>                                                                                                    <ul class="dropdown-menu medtech">
            <li>
              <a href="http://localhost:8888/index.php/on-the-scene/alternate-light-source.html">
             Alternate Light Source</a>
           </li>
             </ul>
               </li>          
    </ul>
     </div><!-- /.nav-collapse -->
    </div>
         </div><!-- /.navbar-inner -->
    </div><!-- /.navbar -->

--

And here is some code added in the body by a plugin (I'm not sure if it's relevant or not):

<link rel="stylesheet" type="text/css" href="http://localhost:8888/skin/frontend/default/default/css/magebuzz/productslider.css" media="all" />
        <script type="text/javascript" src="http://localhost:8888/js/magebuzz/jquery/jquery-latest.js"></script>
    <script type="text/javascript" src="http://localhost:8888/js/magebuzz/jquery/jquery.bxSlider.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8888/skin/frontend/default/default/css/magebuzz/productslider/simple-slider.css" media="all" />
    <script type="text/javascript">
       var $simpleSlider = jQuery.noConflict(); 
          $simpleSlider(document).ready(function(){
            $simpleSlider('#list-items').bxSlider();
          });
    </script>

--

Finally, in the footer:

<script src= http://localhost:8888/skin/frontend/default/medtech/js/bootstrap.min.js></script>
<script src= http://localhost:8888/skin/frontend/default/medtech/js/bootstrap-lightbox.js></script>
<script src= http://localhost:8888/skin/frontend/default/medtech/js/bootstrap-dropdown.js></script>

Like I said, I've tested quite a few solutions that I've found -- including using a jQuery-friendly version of prototype -- but none of the solutions I've tried have fixed the menu drop-down. (I know it would be helpful to recall the solutions that I've tried, but I don't remember now.) The menu drop-down worked when I first started building the theme -- so I don't think there's anything wrong with the code for the menu.

It seems like it should be fairly simple to reconcile the libraries -- and I know it's a common issue -- so maybe I'm missing something else. Maybe the libraries are called in the wrong order? Maybe the scriptaculous library is causing further problems? I'm not sure. But any ideas or solutions, given my source code, would be appreciated.

4
  • You should load jquery after prototype Oct 1, 2014 at 18:42
  • It's a waste of time bothering yourself with minor issues. Instead, use a jQuery extension to do it for you or start with a theme which already includes it, like the new "rwd" theme which comes with Magento 1.9. Oct 1, 2014 at 21:31
  • Thank you -- It turned out that the very last line in the footer that called bootstrap-dropdown.js was causing all the trouble. After a lot of trial and error I figured out that eliminating that line miraculously fixed the drop-down menu (though I'm not sure why). But, I did also install the jQuery extension, just to make the jQuery implementation cleaner -- thank you for that suggestion! Oct 2, 2014 at 16:16
  • @clockworkgeek -- It turned out that the version of jQuery that the extension used didn't seem to work with the dropdown. I posted my solution below. Oct 2, 2014 at 17:15

1 Answer 1

1

It turned out that the very last line in the footer that called bootstrap-dropdown.js was causing all the trouble. After a lot of trial and error I figured out that eliminating that line miraculously fixed the drop-down menu (though I'm not sure why).

I tried using the jQuery extension for Magento, but whatever version of jQuery it was using wasn't really working with the dropdown. I ended up relying on the version of jQuery that was included in the Magebuzz product slider extension, which I already had installed (http://www.magebuzz.com/product-slider.html). I pulled that jQuery file into the header.phtml file of my theme:

<script type="text/javascript" src="/js/magebuzz/jquery/jquery-latest.js"></script><!--had to build in this 'hack' here to load up a jquery libary that works with the dropdown. The srcipt below makes jQuery compatible with prototype.-->
   <script>
    var jqmagebuzz = jQuery.noConflict(); 
   </script>

The last bit of script put jQuery in no conflict mode, so that prototype.js would function properly.

This was a bit of a hack, admittedly. At some point I may look for a more elegant solution, but am happy at this point that everything appears to be working.

Not the answer you're looking for? Browse other questions tagged or ask your own question.