1

I have the same problem as in this question here, which is the conflict between jQuery UI and Bootstrap. The given answer from Darkseal 

$.widget.bridge('uibutton', $.ui.button);

completely solved my problem for the "button"-widget. But it seems to me, that also the "buttonset"-widget reveals a conflict between the two libraries but

$.widget.bridge('uibuttonset', $.ui.buttonset);

does not do the trick for me. Am I doing something wrong?

Community
  • 1
  • 1
Steevie
  • 630
  • 1
  • 6
  • 19

1 Answers1

0

This is an older question but I thought I'd share my fix for this.

You don't need the..

$.widget.bridge('uibuttonset', $.ui.buttonset);

There isn't any conflict there with Bootstrap (v3.3.6). The issue is $.ui.buttonset makes calls to .button() which isn't the the new name you declared so the conflict lives on. To fix this, I updated the calls to .button() inside .buttonset() to match the new name, "uibutton" or whatever you declare it as.

Below is my code for version jQuery UI 1.11.4. Perhaps there is an easier fix, but I've not come across it.

$.widget( "ui.buttonset", {
version: "1.11.4",
options: {
    items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
},

_create: function() {
    this.element.addClass( "ui-buttonset" );
},

_init: function() {
    this.refresh();
},

_setOption: function( key, value ) {
    if ( key === "disabled" ) {
        this.buttons.uibutton( "option", key, value );
    }

    this._super( key, value );
},

refresh: function() {
    var rtl = this.element.css( "direction" ) === "rtl",
        allButtons = this.element.find( this.options.items ),
        existingButtons = allButtons.filter( ":ui-button" );

    // Initialize new buttons
    allButtons.not( ":ui-button" ).uibutton();

    // Refresh existing buttons
    existingButtons.uibutton( "refresh" );

    this.buttons = allButtons
        .map(function() {
            return $( this ).uibutton( "widget" )[ 0 ];
        })
            .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
            .filter( ":first" )
                .addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
            .end()
            .filter( ":last" )
                .addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
            .end()
        .end();
},

_destroy: function() {
    this.element.removeClass( "ui-buttonset" );
    this.buttons
        .map(function() {
            return $( this ).uibutton( "widget" )[ 0 ];
        })
            .removeClass( "ui-corner-left ui-corner-right" )
        .end()
        .uibutton( "destroy" );
}
});

I hope that helps you and everyone else.

Craig
  • 11
  • 2