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

Yes, right now we need to support dialogs until we can upgrade all of them to modals — TheNameHobbs, Oct 03 '14 at 19:06
@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. — tao, Nov 17 '22 at 15:31
@tao 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. — Mark Schultheiss, Nov 17 '22 at 16:02
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. — tao, Nov 17 '22 at 16:13
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. — tao, Nov 17 '22 at 16:15
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. — tao, Nov 17 '22 at 16:31

cvrebert · Answer 1 · 2015-05-30T00:48:02.247

16

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.

edited May 30 '15 at 00:48

answered Oct 03 '14 at 23:57

cvrebert

9,075
2
38
49

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. – WernerVA Feb 08 '15 at 17:48
1

@WernerVA I think you're confusing jQuery and jQuery UI. – cvrebert Feb 09 '15 at 17:42
1

You should also note that you need to call the button functionality with .bootstrapBtn() instead of .button() after doing this. – Gravity Grave May 29 '15 at 15:00

Stefan Lindberg · Answer 2 · 2015-03-24T15:27:05.037

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

This worked brilliantly for me, thanks. One point though you have a typo - "overriders" should be "overrides". — Matt Wilson, Mar 24 '15 at 11:41
Ah, thanks! I've fixed the typo :) Glad to hear it worked for you. — Stefan Lindberg, Mar 24 '15 at 15:27

Coding Lattice · Answer 3 · 2021-04-08T20:51:19.100

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/

The snippet is not working. Jquery is not defined error. – Zam Abdul Vahid Apr 08 '21 at 23:35 — Zam Abdul Vahid, Apr 08 '21 at 23:35

score 0 · Answer 4 · answered Jan 21 '22 at 08:22

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")

score 0 · Answer 5 · answered Mar 28 '23 at 18:58

0

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;}

answered Mar 28 '23 at 18:58

sariDon

7,782
2
16
27

Jquery UI and Bootstrap button conflict

5 Answers5