I’ve gone through many design iterations with my side project, LoanGrid.net. jQueryUI has been my widget library of choice, but I’ve recently begun experiments integrating Twitter Bootstrap with my designs. I was humming right along until I started using the jQuery Spinner element. Suddenly my styles weren’t showing up on the spinner arrow buttons.
A little research turned up a known issue when using jQueryUI and Twitter Bootstrap together. There’s a conflict between jQueryUI and Twitter Bootstrap buttons because they both define $.fn.button(). And as we can see from the jQuery Spinner API docs, our spinner depends on the button element.
A workaround is here:
var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn $.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn
Thanks to user fat for posting the workaround code!
I haven’t run into any other conflicts, but I’m only using a small sliver of the widget features. However, there appear to be more conflicts between the libraries, which is the impetus for Addy Osmani’s (admittedly slow-moving) jQuery UI Bootstrap project.
Great post, thanks to you I saved a lot of time
Thanks for the tip. Sometimes posts like this are easier to find than bugs on GitHub.
Glad I could help, Chris. Thanks for the feedback and for stopping by!
Thanks to you and @fat, my forehead and the wall feel better.
Thanks for the comment. I’m glad I could help!
Thank you! I was about desperate and wasted, spent half of my day trying to figure out what was the problem causing so much pain.
Great news! I appreciate your stopping by.
Hi,
I am having the same issue ( I think).
All works fine without the bootstrap, but when I activave a joomla template that uses the bootstap some buttons don´t work with the mouse click ( and they import the template css into it).
Where should I look and add your code?
Joao
I arrived at this conflict after solving a Bootstrap issue where initializing a specific bootstrap js component (tooltip) wouldn’t work until I re-arrange the order of my javascript loading…(jquery, jquery UI, bootstrap.js). Bootstrap tooltips worked, but jquery ui button styles got hosed. Highly annoying, but good look on the fix.