Jquery not affecting custom fields of an activity

Question

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.

{literal}
<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');
    }
  });
});

</script>
{/literal}

Answer 1

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
    }
} )

Answer 2

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.