How to get Twitter Bootstrap to work with prototype.js?

Question

Look at this piece of code http://jsfiddle.net/u6N6T/3/. The Accordion is working correctly.

But it is broken when prototype.js is loaded, see http://jsfiddle.net/jWZBD/8/.

I followed http://api.jquery.com/jQuery.noConflict/ to make JQuery work along with prototype, but the accordion is not working even if I wrap the bootstrap.js inside "jQuery(document).ready(function($) {});".

Is there anybody know a way to make Bootstrap working when prototype is loaded? Or I have to convert all existing prototype based javascripts to JQuery?

Answer 1

Had the same problem. I wasn't able to fix it but I found a work around.

First, use $.noConflict() and do as ShaunOReilly said and replace all $ characters in Bootstrap.js with jQuery. Note though, that bootstrap has a lot of variables named with $ at the start - these are not references to jQuery, but are part of the variable name. You don't need to change them. I found that searching and replacing instances of $. , $(, and $) does the trick.

Next, do not load the bootstrap-transition plugin. If you are loading the full lib in one script, then go in and remove the transition function (its right at the top of bootstrap.js v2.3.0). You will lose the transition animations, but the collapse structures will still work. See this fiddle for an example.

This will fix the toggle behavior on user interaction, but automated toggles will still be broken - such as showing/hiding the nav menu on page resizes. To fix these problems, just implement your own event listener and call whichever bootstrap function you need directly. See the api for reference.

For example, to solve the problem with the navbar on page resizes, I used this code:

window.onresize = function(event) {
   var nav = jQuery(".collapse");
   if (jQuery(window).width() > 940) nav.collapse('show');
   else nav.collapse('hide');
}

Answer 2

For those developers that use PrototypeJS, Bootstrap requires the use of jQuery. If you do not want to load another library just to handle the the Bootstrap interactions use this fork of Bootstrap : https://github.com/jwestbrook/bootstrap-prototype