2 JS functions with same name conflict

Question

Short

Using 2 libraries at same page: jQuery UI and Twitter Bootstrap:

• jQuery UI very important for me because nearly all UI things built based on it
• Twitter Bootstrap only for split button with dropdown menu functionality.

Now, the problem is both libraries has same named functions which conflicts with each other:

Detailed

Here is example of conflict between jQuery UI and Twitter Bootstrap button functions

Please enter to this website. Press Recommend button on table

jQuery UI modal window will appear. I used jquery ui combobox inside modal window. The problem is, there is no down arrow button as shown on jquery ui combobox demo.

I tried to find what causes the problem: Looked through combobox code, and when it called .button() it went into bootstrap.min.js, not jqui.js.

As you see it's proof of conflict between 2 js libraries.

Btw, Here is jsFiddle where it works well without bootstrap.

Problem

I have multiple ways to solve this conflict problem (WITHOUT TOUCHING FUNCTIONALITY OF THE WEBSITE) I need to get exactly same functionality as split button with dropdown menu (Twitter Bootstrap):

• if possible in jQuery-UI (something like this but with dropdown menu)
• else in CSS + HTML only

and get rid off Twitter Bootstrap. Any solutions greatly appreciated. I'm ready to give 200 reps to good answer (as bounty). Thx in advance

Answer 1

If you are only using the dropdown plugin of Twitter Bootstrap, you don't need the .button() plugin.

Go to the customize bootstrap page and unselect all jQuery plugins, then choose only the dropdown one. You could also unselect some of the CSS if you want.

---

If you need both implementations (Twitter Bootstrap and jQuery UI), you could rename all .button to something like .bsButton in the bootstrap-button.js file (or find this section in a non-minified version) - not tested.

Answer 2

The current version of bootstrap (v2.2.2) now has a noConflict option. Just insert this some place after your bootstrap and jquery script tags but before any usage of the button() function.

<script type='text/javascript'>
    $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>

Alternatively, you can use $(document).ready(handler), but you still have to make sure substitution occurs before button() is called.

Once that line of code is executed, button() will be JqueryUI's button, and bootstrapBtn() will be Bootstrap's version.

Answer 3

I suggest to do custom jQueryUI, or Bootstrap build - both offer this possibility on websites.

I use custom build of jQueryUI with core, effects, interactions, but without widgets, which often causes conflicts.

Answer 4

All other answers fixing conflict between jQuery UI button and bootstrap button but you can't use bootstrap data-api for renamed button() function. Only manually using new-named bootstrapBtn() function.

I find a solution:

• Find and replace all occurences of regex (\$[.\w]+\.)button to \1btn in bootstrap.js file.

• Or use this sed script:

  #!/bin/bash
  # Change bootstrap3 $.fn.button() function to $.fn.btn() for no conflict with jQuery UI
  sed "s/\(\$[[:alnum:]._]\+\.\)button/\1btn/g" bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.btn.js
  sed "s/\(fn\.\)button/\1btn/g" bootstrap/js/bootstrap.min.js | sed "s/button\((\)/btn\1/g" > bootstrap/js/bootstrap.btn.min.js
  

After that you can use bootstrap data-api for button binding and also manually use btn() function in place of button() for Bootstrap while still use jQuery UI button() function.

Answer 5

To fix the collision between Bootstrap and jQuery UI functions, rename one of them:

<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
    $.fn.bsbutton = $.fn.button;
</script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

And then you can call each function at will:

<script type="text/javascript">
    $(".button-one").button()   // jQueryUI button
    $(".button-two").bsbutton()  // Bootstrap button
</script>

You can use this technique for any function you need.

Remember the order include A -> rename A -> include B.