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

Closed
ryan-mahoney opened this Issue Dec 1, 2012 · 26 comments

Projects

None yet
@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
Bootstrap member
fat commented Dec 7, 2012

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

@fat fat closed this Dec 7, 2012
@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!

@killanaca

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
Bootstrap member

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

@fourteenmeister fourteenmeister referenced this issue in paramquery/grid Apr 12, 2013
Closed

conflict with bootstrap.js #42

@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
Bootstrap member

@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
Bootstrap member

@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
Bootstrap member

@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
Bootstrap member

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

@c-cba c-cba added a commit to c-cba/yii-combobox that referenced this issue Apr 7, 2014
@c-cba c-cba 2014-04-08-v1 Make usable as filter in CGridView + Resolve Button Con…
…flict

-- Changes to make widget work correctly as filter in CGridView
	-- (keep it working after grid is refreshed via ajax)
-- Changes to resolve button conflict between bootstrap and jQueryUI
	-- ( see twbs/bootstrap#6094 )
34ef31f
@c-cba c-cba added a commit to c-cba/yii-combobox that referenced this issue Apr 7, 2014
@c-cba c-cba 2014-04-08-v1 Make usable as filter in CGridView + Resolve Button Con…
…flict

-- Changes to make widget work correctly as filter in CGridView
	-- (keep it working after grid is refreshed via ajax)
-- Changes to resolve button conflict between bootstrap and jQueryUI
	-- ( see twbs/bootstrap#6094 )
a7b8085
@c-cba c-cba added a commit to c-cba/yii-combobox that referenced this issue Apr 7, 2014
@c-cba c-cba 2014-04-08-v1 Make usable as filter in CGridView + Resolve Button Con…
…flict

-- Changes to make widget work correctly as filter in CGridView
	-- (keep it working after grid is refreshed via ajax)
-- Changes to resolve button conflict between bootstrap and jQueryUI
	-- ( see twbs/bootstrap#6094 )
e933348
@c-cba c-cba added a commit to c-cba/yii-combobox that referenced this issue Apr 7, 2014
@c-cba c-cba 2014-04-08-v1 Make usable as filter in CGridView + Resolve Button Con…
…flict + Added translation

-- Changes to make widget work correctly as filter in CGridView
	-- (keep it working after grid is refreshed via ajax)
-- Changes to resolve button conflict between bootstrap and jQueryUI
	-- ( see twbs/bootstrap#6094 )
-- Added translation for option "showAllText"
	-- see folder "messages"
13a0e57
@c-cba c-cba added a commit to c-cba/yii-combobox that referenced this issue Apr 8, 2014
@c-cba c-cba 2014-04-08-v1 Make usable as filter in CGridView + Resolve Button Con…
…flict + Added translation

-- Changes to make widget work correctly as filter in CGridView
	-- (keep it working after grid is refreshed via ajax)
-- Changes to resolve button conflict between bootstrap and jQueryUI
	-- ( see twbs/bootstrap#6094 )
-- Added translation for option "showAllText"
	-- see folder "messages"
-- Minor changes to js script file
38ef712
@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
Bootstrap member

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

@cvrebert
Bootstrap member

noConflict should now be working fine in v3.2.0.

@cvrebert cvrebert locked and limited conversation to collaborators Jul 15, 2014
@mocleiri mocleiri pushed a commit to kuali-student/cm-contribution that referenced this issue Oct 17, 2014
depstein KSENROLL-7229 removed bootstrap-button.js from bootstrap.js. see twbs… 13b7d14
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.