title: Jquery UI and Bootstrap button conflict
body: <p>I'm having a problem with button groups for bootstrap. </p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>I have tried using bootstraps solution:</p>
  
  <pre><code>var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
  $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
  </code></pre>
  
  <p>Then when calling $(".btn").bootstrapBtn() and testing the button group every time i click a new button in the group i get the error:</p>
  
  <pre><code>cannot call methods on button prior to initialization; attempted to call method 'toggle'
  </code></pre>
  
  <p>I have done a ton of research and still can't come up with a solution.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;"&gt;
  &lt;div class="btn-group" data-toggle="buttons"&gt;
      &lt;label class="btn btn-default active"&gt;
          &lt;input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked&gt; Bar
      &lt;/label&gt;
      &lt;label class="btn btn-default"&gt;
          &lt;input class="pieChart" data-target="pie-section"  type="radio" name="options" id="pie"&gt; Pie
      &lt;/label&gt;        
      &lt;label class="btn btn-default"&gt;
          &lt;input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"&gt; Column
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code> &lt;div class="bar-section k-content"&gt;
       &lt;div class="chart" id="barChart"&gt;&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="container-fluid pie-section k-content"&gt;
       &lt;div class="row chart" id="pie-section"&gt;&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="column-section k-content"&gt;
       &lt;div class="chart" id="columnChart"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>And my JS to handle the buttons:</p>
  
  <pre><code> $('.btn').button();
  
   $('input[type=radio]').on('change', function () {
      var target = "#" + $(this).data("target");
      $(".chart").not(target).hide();
      $(target).show();
      kendo.resize($(".k-content"));
   });
  </code></pre>
  
  <p>PS: Using Jquery UI version 1.11.1 and Jquery version 1.11.1</p>