Bootstrap radio-buttons toggle issue

Question

I'm trying to turn some regular buttons in radio buttons the twitter bootstrap way (http://twitter.github.com/bootstrap/javascript.html#buttons).

I followed the instructions, but when I press the buttons I get the following error in the console:

Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle' .

Do you know what might cause it? The buttons are loaded in the page and only become visible when the corresponding content is displayed by AJAX.

Thanks!

Tarrah

Maybe dump question but do you have loaded bootstrap-button.js or bootstrap.js ? – Bangup

bootstrap.js is loaded. I have modals on my page and they work perfectly 100% of time. The radio-buttons work like 5% of the time. – Tarrah

You say that the buttons are displayed only when the related content is loaded (from AJAX) right ? I'm not sure you can initialize the buttons when still hidden – Bangup

Could you put your code in a jsFiddle? – Gilford

I am having this same problem, but the solutions below are not working for me. Bootstrap v3.1.0 and jQueryUI v1.10.3 – Eddieeddina

Answer 1

I had the same problem and it was driving me mad!!!!

Until I found that I was loading bootstrap before jqueryui...

I switched the order and notice that if I load jqueryui BEFORE bootstrap, I have no such problem :)

Eleonoreleonora

Bootstrap has a modified version of jQuery UI, and loading jQuery UI can cause troubles. – Clydeclydebank

So you recommend not to have jQuery UI and Bootstrap running together? – Eleonoreleonora

If you are having problems, try commenting jquery ui out of the code, and if your code is working after that, jQuery UI is causing conficts. – Clydeclydebank

Alexandre, if it helps, it drove me mad too until I saw this post. Thank you. – Earthman

how to load jqueryui before bootstrap? – Replica

Nice catch! KiswonoPrayogo just include jQueryUI before including bootstrap.js – Rowdyish

Thank you for this solution!!!!! - I just wasted 3 hours try to debug this problem only to find nothing wrong other than the loading order of the scripts!! – Interlace

To load jQuery UI before bootstrap.js just put your <script src="jquery-ui.js"></script> before <script src="bootstrap.js"></script> if you are running it under requirejs, add a shim : shim: { "bootstrap": { "deps": [ "jquery-ui", "jquery" ] }, "jquery-ui": { "deps": [ "jquery" ] } } – Seth

Thank you Alexandre, this solved my issue. I'm using Meteor, so I had to remove jquery, and jquery-ui, and put them in my client folder. – Monarchy

Confirmed BS 3.1.1 and solution still stands – Lanfranc

I am having this same problem, but this solution is not working for me. Bootstrap v3.1.0 and jQueryUI v1.10.3 – Eddieeddina

In Meteor, remove jquery-ui package, add a lib folder to your client folder, and drop jquery-ui in there. boom. – Riel

Yep, confirmed fix working for jQuery UI 1.10.4 and BS 3.0.0. Really annoying issue since I'm using ASP.NET MVC, and our layout pages now have to load jQuery UI for all pages even though we're only using it on a small subset since the layout pages load bootstrap. Wish I'd found this post 2 hours ago. Thanks. – Thulium

jqueryui.com/download a custom bundle only with what i need, works for me. – Ables

Answer 2

THis issue is due to jquery-ui blocking the initialization of Button definitions from bootstrap for users like me who have problems with shifting the order of the javascript file calls for instance when using the CJUiAutocomplete widget in Yii, just shift the javascript corresponding to button.js from the bootstrap file to the main working file and it will work smoothly.

Alternatively take the corresponding js and place it in a separate file that is called at the bottom of your javascript file stack.

Luettaluevano

Answer 3

Swapping the load order of Bootstrap and jQueryUI solves this problem but then it causes other issues like the Close X on jQueryUI dialogs fails to display. Is there another way to resolve this?

Cronus