I was recently work­ing on a site project that com­bines the power of both Drupal and CiviCRM. The site con­sists of a cus­tom theme (based on Fusion Core) that uses a lit­tle bit of jQuery good­ness to enhance the user inter­face. The site is designed to allow users to cre­ate their own user accounts and set up pro­files, and I keep that in mind as I theme the site. Everything was fine until I upgraded to CiviCRM 3.1.3.

To pro­vide a few user inter­face enhance­ments, I was using Uniform and jQuery UI on this project. Both are jQuery libraries for chang­ing the appear­ance of form ele­ments such as check boxes, radio but­tons, drop down lists, and but­tons. With jQuery UI, I was replac­ing the javascript Calendar popup from Drupal’s Date mod­ule. I did all of this just to pro­vide some eye candy to the site since it has a social net­work­ing aspect. However, I did notice a prob­lem. After upgrad­ing to CiviCRM 3.1.3, I noticed that when I access CiviCRM through Drupal, I get a mes­sage say­ing that javascript must be enabled. This is true if you wish to use CiviCRM’s dash­board fea­ture which is not a big deal to me. However, this also breaks CiviCRM’s date popup for cre­at­ing events, and it also breaks the options menu on view­ing con­tacts. Not good.

At first, I thought that the Suckerfish menu in my theme was caus­ing the issue. But after a lit­tle bit of search­ing, I dis­cov­ered that the prob­lem occurred with the jQuery form replace­ments that I was using. One by one, I dis­abled the scripts from my theme to notice that the Uniform library con­flicts with CiviCRM’s javascript. Refreshing the page after dis­abling the script will fix the javascript prob­lem. Similarly, the same result hap­pened when I dis­abled jQuery UI. Simply dis­abling that script and refresh­ing the page will bring CiviCRM’s javascript back to life.

So in the end, I wanted my forms to look a lit­tle nicer, and I wanted to have a more col­or­ful date popup. I’m not a javascript expert and do not know any more specifics or workarounds to have both the form ele­ments themed and have CiviCRM work­ing cor­rectly. I can only say that in sit­u­a­tions like this, it is best to have all foun­da­tional com­po­nents work­ing instead of wor­ry­ing about the appear­ance of form elements.

By the way, there is noth­ing wrong with jQuery UI or Uniform. If this project was a stand­alone Drupal or any other CMS project, then these form ele­ment replace­ments would be just fine. CiviCRM does some back­end func­tion­al­ity (mainly event reg­is­tra­tion) that is cru­cial for the site. Therefore, it will win in terms of get­ting every­thing work­ing cor­rectly. By all means, use what­ever javascript/theme enhance­ments as you wish, but be aware of pos­si­ble con­flicts when using sites that rely on sev­eral work­ing components.