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?

Cbas · Accepted Answer · 2014-01-14T23:06:07.527

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');
}

I just wanted to say thank you for this solution, its a little bit of work but awesome in its results. as an FYI though, when searching `$)` you will get some regex results that will be mixed in there as well, I found no instances where `$)` was necessary to change to `jQuery)` — Kender, Jan 13 '14 at 16:45
If you look at the bootstrap.js source code, you'll notice that the entire thing is encapsulated in `function($){...}(jQuery)`, so the `$` alias is localized and correctly pointing to jQuery within the Bootstrap plugin already, which means that replacing "$" with "jQuery" in bootstrap.js is not necessary. If feasible, the sensible thing to do would be to replace all Prototype.js functions with jQuery equivalents and get rid of Prototype.js. It's not optimum to be loading two big libraries on a web site. — thdoan, May 21 '15 at 02:51

score 3 · Answer 2 · answered Mar 20 '14 at 12:28

3

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

answered Mar 20 '14 at 12:28

EpokK

38,062
9
61
69

score 1 · Answer 3 · answered Feb 26 '13 at 07:56

1

It's not ideal but you could code a CSS3 accordion and bypass all the jQuery chaos... saw one here: Accordion with CSS3

answered Feb 26 '13 at 07:56

Paul

11
1

score 0 · Answer 4 · edited May 23 '17 at 12:15

0

Two options:

Replace everything in the twitter js file with a custom one, and replace all $ characters with the word "jQuery"

You could write your own accordian kind of toggle functionality if this is the only bit that is the problem.

The other option is to convert Prototype stuff to jQuery. I personally hate to use Prototype, when I can use jQuery.

Here is another example of a similar problem: jQuery & Prototype Conflict

Or a possible solution can be found here: http://www.dynamicdrive.com/forums/showthread.php?29309-Content-Glider-and-Lighbox-Conflict

edited May 23 '17 at 12:15

Community

1
1

answered Aug 27 '12 at 05:25

ShaunOReilly

2,186
22
34

Thanks for the reply. I am not sure if the first option would work, as I have tried moving the bootstrap code inside "jQuery(document).ready(function($) {});". So I don't think this is a naming conflict. Also I have just debugged the script a little bit and it looks like certain event the Bootstrap Collapse was expecting was broken if prototype is loaded. Just hope there is another option other than converting the Prototype stuff. – Innerpeacer Aug 27 '12 at 06:37
https://github.com/twitter/bootstrap/issues/5403 - bootstrap-transition conflicts with Prototype – Victor Oct 05 '12 at 08:53

score 0 · Answer 5 · answered Apr 22 '15 at 15:59

I know this is an old question but I tried all the suggestions found out there to no avail. The thing that worked for me was to slightly changing prototype library to filter certain Bootstrap events like here -

https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554

score 0 · Answer 6 · answered May 20 '15 at 08:31

This article gave me some insight in the underlying problem of Bootstrap using Prototype. The workarounds given there are actually working well. I have adjusted the first one slightly and added a check if Prototype is actually loaded and combined it in a jQueryNoConflict() as a replacement for the standard jQuery.noConflict():

function jQueryNoConflict()
{
    jQuery.noConflict();

    if (typeof Prototype !== "undefined" && Prototype.BrowserFeatures.ElementExtensions)
    {
        var disablePrototypeJS = function (method, pluginsToDisable)
        {
            var handler = function (event)
            {
                event.target[method] = undefined;
                setTimeout(function ()
                {
                    delete event.target[method];
                }, 0);
            };

            pluginsToDisable.each(function (plugin)
            {
                jQuery(window).on(method + '.bs.' + plugin, handler);
            });
        },

        pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'tab'];
        disablePrototypeJS('show', pluginsToDisable);
        disablePrototypeJS('hide', pluginsToDisable);
    }
}

score 0 · Answer 7 · edited Jan 20 '16 at 06:27

0

If you are using bootstrap.js, replace:

this.$element.trigger(startEvent);

with:

this.$element.triggerHandler(startEvent);

It will work smoothly

edited Jan 20 '16 at 06:27

General Failure

2,421
4
23
49

answered Jan 20 '16 at 04:56

Abhijit Patel

3
4

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

7 Answers7