After my last blog post on Drupal, expect some more Drupal related blog posts related to my recent work that I have been doing in Drupal.

You might be knowing that the jquery_ui contributed module is the preferred way to use jQuery UI in Drupal. This module provides the jqeury_ui_add method with which you can include any jQuery UI widget on the page. The module ensures that any widget’s dependencies are also loaded automatically and that multiple modules wanting to include the same widget do not conflict by including the widget script files twice.

So when I needed to use the DatePicker widget from the UI library, I thought a routine call:

jquery_ui_add("ui.datepicker");

should be all that was required. However it turned out that Drupal’s jquery_ui module takes care of including the desired widget’s scripts and script dependencies, but does not include the stylesheets. The stylesheets for the widget and any dependencies need to be included manually on the page when using any jQuery UI widget. For DatePicker, I ended up including the following 3 stylesheets:

<link type="text/css" rel="stylesheet" media="all" href="/modules/jquery_ui/jquery.ui/themes/base/ui.core.css" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/jquery_ui/jquery.ui/themes/base/ui.theme.css" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/jquery_ui/jquery.ui/themes/base/ui.datepicker.css" />

It would have been really useful if the module would have taken care of the css dependencies of a widget too.

UPDATE:

• Feb 8, 2011 – This blog post does not apply to Drupal 7. jQuery UI ships with Drupal 7 out of the box, and D7 provides a handy “drupal_add_library” method, which takes care of adding all resources for the desired library (including css and js files) on page.