jtable (jquery) missing dialog format

Question

I'm trying to create jquery jtable according to documentation at GettingStarted.

Everytime a dialog is opened, the entire format/dialog style is missing. I can still see the text and the buttons are links instead, but it looks pretty crappy.

It feels like I'm missing something really trivial but I can't seem to find out what.

I've tried it out here where you can see the missing style (compared to the several dialogs at GettingStarted).

I'm using jquery-1.7.2.min.js and jquery-ui-1.8.23.custom.min.js (have also tried CDN version at jquery-ui.js with same result).

EDIT: There are no logic implemented on purpose here. I'm aware that adding records isn't working, but the style should still show dialogs.

Answer 1

If you look in the source code of jtable.css it's importing:

@import '../jtable_lightcolor_base.css';

Does the file exist in your directory structure? If not, then that's probably what's causing the issue.

Update

The dialog format is part of jQuery UI and you have not included the jQuery UI CSS

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />