Jquery UI and Bootstrap button conflict

Question

I'm having a problem with button groups for bootstrap.

Right now I have jquery ui js called before bootstrap js and the button gorup works fine. However, if i keep this structure, jquery ui dialog buttons do not work, specifically the close button does not show due to conflicting js code.

If i switch the order then the jquery ui dialog close button shows but the button groups for bootstrap are all messed up, because of the conflict between the two js libraries.

I have tried using bootstraps solution:

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Then when calling $(".btn").bootstrapBtn() and testing the button group every time i click a new button in the group i get the error:

cannot call methods on button prior to initialization; attempted to call method 'toggle'

I have done a ton of research and still can't come up with a solution.

Here is my code:

<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;">
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
    </label>
    <label class="btn btn-default">
        <input class="pieChart" data-target="pie-section"  type="radio" name="options" id="pie"> Pie
    </label>        
    <label class="btn btn-default">
        <input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
    </label>
</div>

 <div class="bar-section k-content">
     <div class="chart" id="barChart"></div>
 </div>

 <div class="container-fluid pie-section k-content">
     <div class="row chart" id="pie-section"></div>
 </div>

 <div class="column-section k-content">
     <div class="chart" id="columnChart"></div>
 </div>

And my JS to handle the buttons:

 $('.btn').button();

 $('input[type=radio]').on('change', function () {
    var target = "#" + $(this).data("target");
    $(".chart").not(target).hide();
    $(target).show();
    kendo.resize($(".k-content"));
 });

PS: Using Jquery UI version 1.11.1 and Jquery version 1.11.1

Answer 1

If you simply Google that error message, you'll see that it's a jQuery UI error message, so $.fn.button at that point in your code is referring to the jQuery UI Button plugin, not the Bootstrap Button plugin.

You need to put the noConflict after you've loaded Bootstrap but before you load jQuery UI, e.g.:

<script src="/foo/jquery.min.js"></script>
<script src="/foo/bootstrap.min.js></script>
<script>
  $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
<script src="/foo/jquery.ui.js"></script>

You will then need to use $(...).bootstrapBtn(...) instead of $(...).button(...) in the rest of your code.

Answer 2

If you're using gulp or Grunt to build your assets (with main-bower-files for example) an option would be not to include the whole of jQueryUI. Just take the parts you need and skip buttons and tooltip. Those two are the ones that conflict the most in my experience.

For example put the following section in your bower.json:

"overrides":
    "jqueryui": {
        "main": [
            "ui/core.js",
            "ui/widget.js",
            "ui/mouse.js",
            "ui/datepicker.js",
            "ui/draggable.js",
            "ui/droppable.js",
            "ui/resizable.js",
            "ui/selectable.js"
        ]
    }

Just using the parts you need is also good practise to void page size when loading and sidesteps the conflict problem altogether. Hope this works in your case as well.

edit fixed typo