New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

Projects
None yet
@ryan-mahoney

ryan-mahoney commented Dec 1, 2012

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

This comment has been minimized.

Show comment
Hide comment
@brettalton

brettalton Dec 5, 2012

Is this a namespace issue?

brettalton commented Dec 5, 2012

Is this a namespace issue?

@maimairel

This comment has been minimized.

Show comment
Hide comment
@maimairel

maimairel Dec 6, 2012

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)

maimairel commented Dec 6, 2012

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

This comment has been minimized.

Show comment
Hide comment
@ryan-mahoney

ryan-mahoney Dec 6, 2012

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

ryan-mahoney commented Dec 6, 2012

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

This comment has been minimized.

Show comment
Hide comment
@fat

fat Dec 7, 2012

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@winguse

winguse Apr 3, 2013

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 commented Apr 3, 2013

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

This comment has been minimized.

Show comment
Hide comment
@winguse

winguse Apr 3, 2013

@fat please help!

winguse commented Apr 3, 2013

@fat please help!

@killanaca

This comment has been minimized.

Show comment
Hide comment
@killanaca

killanaca Apr 5, 2013

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

killanaca commented Apr 5, 2013

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

@FagnerMartinsBrack

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Apr 5, 2013

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.

FagnerMartinsBrack commented Apr 5, 2013

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Apr 5, 2013

Member

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

Member

cvrebert commented Apr 5, 2013

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

@JohnLivermore

This comment has been minimized.

Show comment
Hide comment
@JohnLivermore

JohnLivermore Apr 30, 2013

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.

JohnLivermore commented Apr 30, 2013

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

This comment has been minimized.

Show comment
Hide comment
@llee

llee Jun 26, 2013

Try this:

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

llee commented Jun 26, 2013

Try this:

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

@atippett

This comment has been minimized.

Show comment
Hide comment
@atippett

atippett Dec 20, 2013

Is this an issue with bootstrap 3?

atippett commented Dec 20, 2013

Is this an issue with bootstrap 3?

@andyl

This comment has been minimized.

Show comment
Hide comment
@andyl

andyl Jan 11, 2014

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

andyl commented Jan 11, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 11, 2014

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.

Member

cvrebert commented Jan 11, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@andyl

andyl Jan 11, 2014

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?

andyl commented Jan 11, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jan 11, 2014

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.

Member

mdo commented Jan 11, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@andyl

andyl Jan 11, 2014

@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...

andyl commented Jan 11, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jan 11, 2014

Member

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

Member

cvrebert commented Jan 11, 2014

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

@andyl

This comment has been minimized.

Show comment
Hide comment
@andyl

andyl Jan 11, 2014

@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.

andyl commented Jan 11, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@FagnerMartinsBrack

FagnerMartinsBrack Jan 11, 2014

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.

FagnerMartinsBrack commented Jan 11, 2014

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

This comment has been minimized.

Show comment
Hide comment
@akger1379

akger1379 Feb 3, 2014

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

akger1379 commented Feb 3, 2014

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

This comment has been minimized.

Show comment
Hide comment
@manoletto

manoletto Feb 5, 2014

@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 ?

manoletto commented Feb 5, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@hnrch02

hnrch02 Feb 5, 2014

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.

Member

hnrch02 commented Feb 5, 2014

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

cyildiz added a commit to cyildiz/yii-combobox that referenced this issue Apr 7, 2014

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 )

cyildiz added a commit to cyildiz/yii-combobox that referenced this issue Apr 7, 2014

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 )

cyildiz added a commit to cyildiz/yii-combobox that referenced this issue Apr 7, 2014

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 )

cyildiz added a commit to cyildiz/yii-combobox that referenced this issue Apr 7, 2014

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"

cyildiz added a commit to cyildiz/yii-combobox that referenced this issue Apr 8, 2014

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
@YedukondaluB

This comment has been minimized.

Show comment
Hide comment
@YedukondaluB

YedukondaluB Jul 15, 2014

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.

YedukondaluB commented Jul 15, 2014

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 15, 2014

Member

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

Member

cvrebert commented Jul 15, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 15, 2014

Member

noConflict should now be working fine in v3.2.0.

Member

cvrebert commented Jul 15, 2014

noConflict should now be working fine in v3.2.0.

@twbs twbs locked and limited conversation to collaborators Jul 15, 2014

mocleiri pushed a commit to kuali-student/cm-contribution that referenced this issue Oct 17, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.