Question

I am using Twitter Bootstrap’s “split-button” dropdowns and had included the apparently required bootstrap javascript called bootstrap-button.js and for all my trying I couldn’t get the darn thing to drop down. I then started removing JS files that might interfere and guess what? it was the bootstrap-button.js file that was the culprit! How does that make sense? The only way to have the boxes drop down is to NOT include the dropdown JS file?

Has anyone else seen this problem? Any suggestions on what to do or how to troubleshoot this?

Answer 1

This is a common mistake which likely occurs because the bootstrap.min.js, which most people download, already includes all the plugins, and since the docs for the JavaScript plugins explicitly call for including the individual files, people unwittingly load the plugins they want twice.

Many of the plugins will exhibit behaviors similar to what you are describing if they get loaded twice into a page. The reason for this is that the plugins’ event listeners are attached to the page in such a way as to allow two identical event listeners to be attached at the same time. Hence what tends to happen on a double load is that when a click happens on a component, a call to a show() and then a call a hide() method (or toggle() x 2) will occur in sequence, neutralizing the expected outcome.

I think part of the reason why the direct downloads of the individual JavaScript plugins was removed from the documentation in 2.1 was in order to reduce the avenues which lead to this mistake. Unfortunately, it doesn’t seem to have completely eliminated it.