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

Tobias

Any reason why you're not just using the Bootstrap modal? – Montgolfier

Yes, right now we need to support dialogs until we can upgrade all of them to modals – Tobias

Please post a JS Bin or JS Fiddle of your example. – Quadrature

@MarkSchultheiss, this question doesn't need kendo-ui expertise to be answered. Therefore, kendo-ui tag is not necessary. You apply tags to attract specialists in that particular technology to answer the question. In layman's terms, you should apply the tram tag when you have a broken tram you need to fix, not when you got into a tram to get to the job. – Kimberelykimberlee

@Kimberelykimberlee Debatable given the kendo.resize( in there but this is pretty old and kendo has moved on from well...anyway opinions differ - and none of the answers has been accepted. – Ewan

I can answer this question without having used Kendo UI once. This tells me one doesn't need kendo-ui expertise to answer it. Also, considering it's a UI library, there might be specialists in kendo-ui which might lack the required CSS expertise to answer this question (similar to how a Bootstrap expert knows what classes and/or markup to apply without necessarily knowing much about the actual CSS rules involved). Applying a tag is a statement: "A comprehensive answer is likely to require expertise in X technology". I don't think that's debatable. – Kimberelykimberlee

Another criteria one should consider when applying tags is the scope: you should apply the kendo-ui tag to Q/A's specific to it which would not apply outside of KendoUI scope. If the answer works anywhere, the tag is irrelevant. And I don't have something against kendo-ui. I apply the same logic to any other tags. – Kimberelykimberlee

Last, but not least, ref: "none of the answers have been accepted". In this case, that's irrelevant. We have a +5 question with a +16 answer followed by a +2 answer. This tells us that the +16 answer is relevant and on point (16 people thought so and nobody down-voted it). So the reason it's not marked as accepted is because OP only cared about themselves getting help, not about helping others (by specifying the answer is correct and helping the question getting indexed as having an accepted answer). In short, it tells us that OP is selfish, not that the question is unanswered. – Kimberelykimberlee

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.

Quadrature

You may think it work, but it doesn't. Bootstrap requires jQuery and therefore the jQuery script source has to be loaded before the Bootsrap script source. If you do it the other way around your jQuery UI stuff will work but your Bootstrap things wont. – Genova

@Genova I think you're confusing jQuery and jQuery UI. – Quadrature

You should also note that you need to call the button functionality with .bootstrapBtn() instead of .button() after doing this. – Tied

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

Cogon

This worked brilliantly for me, thanks. One point though you have a typo - "overriders" should be "overrides". – Ghirlandaio

Ah, thanks! I've fixed the typo :) Glad to hear it worked for you. – Cogon

Answer 3

I know this an old post but I had the same issue. I had Bootstrap 3.0.3 and upgrading it to version >=3.4.1 solved the issue.

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

<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:non;">
  <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>
</div>

https://jsfiddle.net/codinglattice/gu4mjaep/29/

Gurley

The snippet is not working. Jquery is not defined error. – India

Answer 4

Try to move jquery UI js before bootstrap js. This way it works for me.

var bundle = new ScriptBundle("~/bundles/CommonJs")
                                .Include("~/js/jquery-1.12.4/jquery-ui.js")
                                .Include("~/js/bootstrap.min.js")

Vogeley

Answer 5

Yet another way that worked for me:

Add this style within a <style> tag in the <head> (or anywhere you find suitable):

button[type="button"]{border-radius: revert;}

Lashandralashar