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

Computation

I'm not sure if it's possible. Do you need to use the JQuery dialog? Check this link: forums.asp.net/t/1761495.aspx/… – Heptad

You might find this useful as well: addyosmani.github.com/jquery-ui-bootstrap – Heptad

Yes this is what I'm using. It's noted in the title and the first line of the question :-) – Computation

I'm sorry for my mistake. Can you put all the css and js files that you have added? I have added the same files as in the code samples and it is working: css/custom-theme/jquery-ui-1.8.16.custom.css, bootstrap/bootstrap.css, js/jquery-1.6.2.min.js, js/jquery-ui-1.8.16.custom.min.js – Heptad

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

Computation

thank's great work but bootstrap tooltip change to jquery ui tooltip – Bistort

yeah this is from 2012 – Computation

three years later you saved my morning anger – Kindhearted

Glad it helped you out :) – Computation

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.

Chile

I was so confused as to why my jQuery UI buttons looked different for a while... thanks for this! I only need this temporarily until I can remove jQuery UI dependency in my application and fully switch to bootstrap! – Barbusse

Answer 3

You might need to add this to your js/html file $('button').button(); so that every button should be rendered according to your theme.

Nam