I have written some jquery (inside an extra template file) that does some simple show/hiding of custom fields in an activity based on user selections. We use it as a helpful tool for users to select the right options (i.e. Do you own a pet? If they indicate "yes" then the Pet Name field is shown.)

This is currently working in 4.6.8 (Drupal 7) but in my test upgrade to 5.5.3 the jQuery targets aren't affecting the custom data sets. For instance, I can try targeting something generic like '.crm-container .crm-accordion-header' and for testing purposes turn it blue. This affects the headers for the core sections (attachments, send a copy, send a follow up) but the headers for my custom data remain unaffected.

Is there a fundamental change in how/when the custom fields are loaded that the jQuery isn't able to affect it?

EDIT: I have also tried adding the javascript straight into a template file (no "extra") in the overrides folder, still custom fields are unaffected. I also placed javascript directly in the main template file, not in the overrides folder - still custom fields are not affected.

<script type="text/javascript">

CRM.$(function($) {
  $(document).ready(function () {

    // First, get the Activity ID. 
    var acttype =  {/literal}{$atype}{literal}

    if(acttype === 75){
        $('.crm-container .crm-accordion-header').css('background-color', 'blue');

  • I'm assuming you have $( document ).ready() in there Commented Nov 3, 2018 at 11:13
  • I do :-/ But I'm updating my question to include some code because I am at a loss! @TonyHorrocks
    – RayWright
    Commented Nov 6, 2018 at 16:47

2 Answers 2


In some CiviCRM pages/forms custom fields are loaded/reloaded via AJAX (you will notice that if you have a set of custom fields based on Activity type, the custom fields update/reload when changing the Activity type to show its correspondent set of custom field).

With that in mind you should trigger you script on .ajaxComplete(), something along those lines:

CRM.$( function( $ ) {
    $( document ).ajaxComplete( function( event, xhr, settings ) { // optional params if you need to differenciate between events/requests
        // do stuff
} )

Ok What's happening is this. If you look at your .crm-accordion-header css rules in an Inspector window in your browser, you will see there is a background-color !important rule earlier in the CSS cascade that is overriding anything you do in jQuery. I was testing this in the Console and drove me nuts too.

jQuery does not recognise !important using .css so you cannot override it in that way. I tried defining a new class .importantClass and using addClass to add it in, but that failed too.

So what you need to do is find the offending line in the CSS file and remove the !important bit and all will be well.enter image description here

  • THANK YOU for taking the time to dig. Unfortunately, I can't replicate what you're referring to - none of the styles on my site have the '!important' rule attached to the background-color (in relation to .crm-container .crm-accordion-header). I only used the css change as a test, my actual template override also has a few show/hides, checking/unchecking inputs, etc. The file works properly in 4.6.38 but in 5.5.3 I can only affect 'core' or generic elements (like td or p). I stripped my file down to simplify all the possible variables but no dice in diagnosing what's happening.
    – RayWright
    Commented Nov 7, 2018 at 13:40
  • If it's any help I added a pic. Also is it still not working if you do the jQuery on the Console? Commented Nov 7, 2018 at 14:22
  • We may be on different versions of Civi or CMS (I'm in Drupal 7) pasteboard.co/HM4CPA5.png
    – RayWright
    Commented Nov 7, 2018 at 14:27
  • I haven't tried directly in the console yet (I assume I can do that in Firefox's developer tools?)
    – RayWright
    Commented Nov 7, 2018 at 14:32
  • Yes works in most. Do a right-click or control-click on the bit you want to look at and select Inspect Element from the drop down menu that appears. Selct Console to directly test your jQuery. See what happens there. That's how I tested your problem Commented Nov 7, 2018 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.