6

I use the the following code to show a dialog with jQuery UI:

var $dialog = $('<div></div>')
.text(msg)
.dialog({
    autoOpen: false,
    height: 140,
    modal: true,
    title: "Confirm",
    buttons: {
        "Yes": function() {
            $(this).dialog('close');
        },
        "Cancel": function() {
            $(this).dialog('close');
        }
    }
});
$dialog.dialog('open');

However, the buttons have no styles. I notice that the HTML generated for the buttons are:

<div class="ui-dialog-buttonset">
    <button>Yes</button>
    <button>Cancel</button>
</div>

From the jQuery UI demos it is:

<div class="ui-dialog-buttonset">
    <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>
    <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">Cancel</span></button>
</div>

I.e. the CSS styles are missing. Do you know why?

xhh
  • 4,002
  • 2
  • 21
  • 17

2 Answers2

5

If you use Bootstrap and JQueryUI, jquery-ui.js must be included AFTER bootstrap.js.

Oleksandr V. Kukliuk
  • 211
  • 3
  • 3
0

Perhaps because the CSS files are missing? Do you actually include them? Then use firebug or httpfox to see if there's a 404 somewhere...

Edit: I include a jQuery-ui css like this: <link type="text/css" href="blah/css/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet" />

Jochem
  • 2,995
  • 16
  • 18
  • 2
    In addition to this I'd suggest making sure your jquery-ui.js has the button scripts too: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js has all the ui elements. – WSkid Nov 08 '10 at 07:49
  • @WSkid you're right! Thanks a lot! I guess it is because I didn't select the "Button" widget when downloading the jQuery UI custom JS. When using the jQuery UI JS from Google Ajax lib you mentioned, it works. – xhh Nov 08 '10 at 08:11