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!

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 :)

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.

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?