Button classes not added in jQuery UI Bootstrap Dialog

Question

I've added UI Bootstrap theme to my application and most of it seems to work very well, but I can't seem to get my UI dialog buttons to render correctly like the demo. It seems that jQuery UI is not adding the classes to the buttons so that the buttons will be styled.

Using Chrome developer the buttons should render as:

<button type="button" 
   class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
   role="button" 
   aria-disabled="false">
      <span class="ui-button-text">Ok</span>
</button>

But when I create my dialog:

$('#dialog').dialog({
   title: 'My Text',
   close: function (event, ui) {
      myfunction();
   },   
   bgiframe: false,
   width: 860,
   height: 500,
   resizable: true,
   modal: true,
   buttons: {
      Cancel: function () {
         $(this).dialog("close");
      } 
   }
});

The ui dialog buttons render as so:

<button type="button">Cancel</button>

No classes are being added and I can't find anything that tells me IF I need to execute other methods or what the deal is.

Thanks.

-V

Edit: sorry I forgot to reference the versions I'm using:

Bootstrap: 2.2.2 jQuery: 1.8.3 jQuery UI: 1.9.2

Answer 1

Ok I resolved this myself.

It was simply the order of my javascript files.

Be sure to load bootstrap.js before you load jquery.ui

Once I did this all the button classes applied natively by ui appeared correctly.

Thanks to everyone to contributed.

-V

Answer 2

This is because bootstrap's button() function conflicts with Jquery UI's button() function. See this bug for more information: https://github.com/twitter/bootstrap/issues/6094

If you want to load bootstrap.js after jqueryui, you can use this to move bootstrap's button() function out of the way:

var btn = $.fn.button.noConflict(); // reverts $.fn.button to jqueryui btn
$.fn.btn = btn; // assigns bootstrap button functionality to $.fn.btn

Alternatively, you can use bootstrap modals instead of jqueryui dialogs.