Conflict between bootstrap-button.js (v2.2.1) and jQuery UI (1.9.2)

[ryan-mahoney]

If bootstrap-button.js or that portion of the bootstrap.js file are included with jquery ui, the buttonset() function in jquery ui quietly fails. There is no error message, but a group of radio buttons will not be re-configured into a set of buttons.

[brettalton]

Is this a namespace issue?

[maimairel]

Both Bootstrap and jQuery-UI defines $.fn.button, so one of them would be overridden.
All this time I have been renaming Bootstrap button plugin as many jQuery-UI components depends on button (dialog and spinner for example)

[ryan-mahoney]

I agree that it aught to be changed on the Bootstrap side, if possible. I think jQuery UI defined it "first" but I could be wrong ;)

[fat]

I think jQuery UI defined it "first" but I could be wrong ;)

That's silly. but! i went ahead and added noConflict() methods to all bootstrap plugins.

So if you are worried about namespace collisions you can call:

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn

this will be live in 2.2.2

[winguse]

if i use this code to avoid conflict, another issue occour, something like TypeError: Property 'button' of object [object Object] is not a function .

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn

code is here.

[winguse]

@fat please help!

[a-ursino]

i have "Uncaught TypeError: Object function ( options ) {..} has no method 'noConflict' " when i call
var btn = $.fn.button.noConflict()

[FagnerMartinsBrack]

Choose bootstrap or jquery UI.

• JqueryUI has a weak progressive enhancement (plain HTML instead of keeping the CSS), so it requires Javascript for everything to work. It also uses a lot of bootstrap namespaces.
• Twitter bootstrap has a better progressive enhancement but most of it requires a lot of manual markup, including writing classes. It also uses a lot of jqueryUI namespaces.

Using both is asking for a lot of problems and extra code.

[cvrebert]

noConflict is known to be broken; they're fixing it in v3.

[JohnLivermore]

noConflict only works if bootstrap.js is loaded after jqueryui.js. If bootstrap is loaded first, then the jquery button overrides the function and the noConflict is lost (noConflict is not part of the jquery button function). I am using 2.2.2.

[llee]

Try this:

if($.fn.button.noConflict) {
$.fn.btn = $.fn.button.noConflict();
}

[atippett]

Is this an issue with bootstrap 3?

[andyl]

just ran into this conflict - why is this still an issue? should have been changed in bootstrap long ago.

[cvrebert]

@andyl: It's being worked on; see #11966.

But also: http://getbootstrap.com/javascript/ :

Third-party libraries

Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own.

[andyl]

With respect and gratitude for Bootstrap, let me ask, what is there to work on? Just rename the function to something other than a name that has not already been chosen by jQuery. Of course - Bootstrap is not going to be out of the box compatible with every JS library under the sun. But incompatible with jQuery UI????

How about prefixing the function names with "bootstrap_*"? Wouldn't that solve the problem?

[mdo]

@andyl We'll get to the fix for it when we can. @cvrebert doesn't write the JS, @fat does, and he hasn't gotten to every single bug. Simply renaming the function isn't an option because of version control and backward compatibility.

[andyl]

@mdo / @fat - how about renaming the methods, then adding alias methods to preserve backwards compatibility ??

Simple and fast, solves the problem, load-order independent, backwards compatible...

[cvrebert]

@andyl How exactly would the alias methods not still conflict?

[andyl]

@cvrebert - when the alias methods conflicted, people could use the namespaced methods as fallback.

alias methods would preserve backwards compatibility for existing users.

at some point maybe you deprecate the alias methods, maybe during a major upgrade.

[FagnerMartinsBrack]

I am always in favor of such conflict resolution, at least for major libraries. But I must say that using 2 libraries that does at most the same thing and uses 2 different approaches is look for trouble (like I mentioned earlier in this thread).

Maybe bootstrap should not support other libraries yet, it would enforce ppl to create a better organized codebase. If one may use another library, it may also change the whole design to make it standard. If such work should be done anyway, creating an alias seems pretty easy.

You can build anything on top of bootstrap. The only thing I miss is the jQuery UI Widget Factory pattern, that could be used to make standard the whole plugin system and eventually avoid any kind of conflicts (bootstrap codebase would become jQuery standard, the benefits are huge).
I have done that in the past, but I have given up due to the huge ammount of work and time wasted to update.

[akger1379]

I wrote a small plugin simulate jQueryUI buttonset() without needing jQueryUI. It works with BS2 and BS3. May it be useful for someone else.
https://github.com/akger1379/bootstrap-form-buttonset

[manoletto]

@mdo / @fat :
Bootstrap is great, jQuery UI is great !
You say : "Designed and built with all the love in the world by @mdo and @fat.'"
But, do a conflict is a great thing in love ?
Yes, you don't support other libs, but you use it !
Great thanks to Douglas Crockford and others JS masters.
That says ...

With last BootStrap 3.1.0 and jQuery UI 1.10.4, after a .noConflict() :

var bootstrapButton = $.fn.button.noConflict();

$.fn.bootstrapBtn = bootstrapButton;

, .button() is no more in BS namespace.

But in :

// BUTTON DATA-API
// ===============

$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
var $btn = $(e.target);
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle');
e.preventDefault()

})

.button() is used, so :
jQuery give an error :
Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'.
Better be '$btn.bootstrapBtn('toggle');' but how ? how ?

[hnrch02]

A similar problem to what @manoletto described can also be found in tooltip.js/popover.js. See the discussion in #6303 and this comment.

[YedukondaluB]

Hello,
I am YK Web Designer and Developer.
I would like to share bootstrap issues. when i click on drop down or text area Mozilla Firefox was not showing right side black border.

can any one help me it's highly appreciated..

Thanks in advance for quick response.

[cvrebert]

@YedukondaluB Your problem doesn't sound like it's related to this issue.

[cvrebert]

noConflict should now be working fine in v3.2.0.