UPDATED: Bootstrap.js & Prototype.js in Fuji

I’ve been getting a ton of emails lately about the persistent issues with Bootstrap.js dropdowns, accordions, or other JavaScript based Bootstrap components in Fuji. This is caused by Prototype.js (not really a big surprise). This issue has existed as long a CMS has been around, however what is specific to Fuji is that all the usual tricks and workarounds have stopped working. Previously I released a couple workaround but they were not complete and issues remained.

I think I finally have a solution that seems to work and I have yet to find a case where it does not. The solution is to replace Bootstrap.js (which relies on jQuery) with “Bootstrap Prototype” which is available here: https://github.com/jwestbrook/bootstrap-prototype

You can still include jQuery (with noConflict()) and use as needed, but this will get all your drop down menus and Bootstrap components working with Prototype.

HTML:

UI Script: (name: “prototype-bootstrap”)

13 comments

  1. Hi Nathan,

    Thanks for this! I had just run into this issue with bootstrap dropdowns and the mobile accordion menu not working in a fuji instance and this solution was really helpful.

    1. Are you still including the bootstrap.js file? The drop downs should not disappear when using this file instead of bootstrap.js. I tested it and it worked fine for me.

    2. I am also having this issue. I’ve created the UI Script and I’ve also added the HTML provided above to my layouts for our CMS site, however, my menu drop-downs still disappear when clicked. Is there a specific place that I need to include the provided HTML posted above?
      Thanks,
      Jacob Laux

  2. I have tried using this an implementing popovers and a collapse menu and I keep getting errors, have you been able to implement them? Everything else works fine

    1. Martin, I tested all the main elements and everything seemed to work for me. I’m pretty sure I tested the collapse menu. But I’m out of the country rest of this week so won’t have an opportunity to check it.

      1. Yeah so basically I just grabbed a sample collapse from the bootstrap site and when I load the page the menu is expanded, clicking on it will collapse it but then it won’t expand again.

  3. Hi, can get everything working except for the collapse menu, can collapse the menu, but not back again. It just stays toggled. Any ideas?

  4. Hi Nathan,

    I used this solution, it works great but it seems there is an issue with this solution. When using this solution to Bootstrap v3, than it is having some styling issues. Like I tried it with bootstrap v2 tabs and it works fine but once i used it with Bootstrap v3 than it is having some styling issues.

    1. Akash, I did a quick test of all the main components with this script and I did not see any issues. The CSS should still be the original CSS that ships with Bootstrap, this should just replace the javascript. Thanks for brining this to my attention though, if I find time I’ll take a closer look. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *