JQuery UI and CakePHP

Question

I'm having problem showing JQuery UI themes for my CakePHP application. I placed the theme at app/webroot/lib/jquery.ui/ . Now on my layout I imported the theme using :

echo $html->css('/lib/jquery-ui/theme/ui.all');

I'm usingthe DatePicker widget. On my page, I can see that the my textbox was showing the date picker when focused, but the theme was not applied properly. I can't see the background images. I know that the theme (or css) has been imported since I can see some changes in the DatePicker (fonts, spacings, etc.). I just couldn't see the background images.

I don't know if this has something to do with my problem, but I'm also using YUI.

Answer 1

I take it your ui.all.css file lives in app/webroot/css/lib/jquery-ui/theme/ ?

Where are the images that it references?

URLs for background images in CSS files should be relative to the CSS file itself - so if the images live in app/webroot/img/lib/jquery-ui/theme/, the URLs in the CSS file should be ../../../../img/lib/jquery-ui/theme/ or alternatively, the URLs can be absolute from the DocRoot of the site, e.g. /img/lib/jquery-ui/theme/

Answer 2

OK, so I found the answer here : http://stackoverflow.com/questions/460263/jquery-ui-datepicker-css-problem

Answer 3

Just to add a little bit more clarification:

I have been using the jquery ui datepicker for several projects and it always worked great. Then I baked a new cake project, dropped in datepicker, and found that the background images were not loading. I removed cake.generic.css from my application, and the datepicker images were able to load! Add it back in, and they vanish!

So long as you use your own form css for your apps, you should be fine.

Answer 4

you said you have the files at app/webroot/lib/jquery.ui/

so you should use the correct path:

echo $html->css('/lib/jquery.ui/theme/ui.all');

Answer 5

Check files/directories permissions!