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.