Answers.Body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.<a href="https://i.sstatic.net/7x2gW.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/7x2gW.png" alt="enter image description here"></a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-07T13:40:00.300Z
Answers.Text: 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.
Answers.UserDisplayName: RayWright
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-07T14:22:38.097Z
Answers.Text: If it's any help I added a pic. Also is it still not working if you do the jQuery on the Console?
Answers.UserDisplayName: Tony Horrocks
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-07T14:27:11.840Z
Answers.Text: We may be on different versions of Civi or CMS (I'm in Drupal 7) https://pasteboard.co/HM4CPA5.png
Answers.UserDisplayName: RayWright
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-07T14:32:52.363Z
Answers.Text: I haven't tried directly in the console yet (I assume I can do that in Firefox's developer tools?)
Answers.UserDisplayName: RayWright
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-07T15:01:53.333Z
Answers.Text: 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
Answers.UserDisplayName: Tony Horrocks
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-07T16:00:06.720Z
Answers.Text: A) a million thanks I didn't know I could test jquery right in the console! B) yes the jquery is effective in the console. I'm wondering if the extra template is loading too early to affect the custom fields. I am going to test the jquery in an override template file (that's not .extra) and inside of a core template file. Just to learn where the jquery load and custom fields load might be happening.
Answers.UserDisplayName: RayWright
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-07T09:49:47.650Z
Answers.LastActivityDate: 2018-11-07T14:22:13.120Z
Answers.LastEditDate: 2018-11-07T14:22:13.120Z
Answers.UserDisplayName: Tony Horrocks
Answers.Body: <p>In <em>some</em> 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).</p>
  
  <p>With that in mind you should trigger you script on <a href="http://api.jquery.com/ajaxcomplete/" rel="nofollow noreferrer">.ajaxComplete()</a>, something along those lines:</p>
  
  <pre><code>CRM.$( function( $ ) {
      $( document ).ajaxComplete( function( event, xhr, settings ) { // optional params if you need to differenciate between events/requests
          // do stuff
      }
  } )
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-28T20:41:58.703Z
Answers.LastActivityDate: 2018-11-28T20:41:58.703Z
Answers.UserDisplayName: Andrei
Body: <p>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 <em>right</em> options (i.e. Do you own a pet? If they indicate "yes" then the Pet Name field is shown.)</p>
  
  <p>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 <code>'.crm-container .crm-accordion-header'</code> 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.</p>
  
  <p>Is there a fundamental change in how/when the custom fields are loaded that the jQuery isn't able to affect it?</p>
  
  <p>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.</p>
  
  <pre><code>{literal}
  &lt;script type="text/javascript"&gt;
  
  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');
      }
    });
  });
  
  &lt;/script&gt;
  {/literal}
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-11-03T11:13:14.943Z
Comments.Text: I'm assuming you have $( document ).ready() in there
Comments.UserDisplayName: Tony Horrocks
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-11-06T16:47:19.313Z
Comments.Text: I do :-/ But I'm updating my question to include some code because I am at a loss! @TonyHorrocks
Comments.UserDisplayName: RayWright
Tags: <javascript><custom-templates>
Title: Jquery not affecting custom fields of an activity
ThreadText: # Jquery not affecting custom fields of an activity
  
  (Asked by: username_0 on 2018-10-26)
  
  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}
  
  ```
  
  **Tags:** javascript, custom-templates
  
  > **Comments:**
  > **username_1**: I'm assuming you have $( document ).ready() in there  
  > **username_0**: I do :-/ But I'm updating my question to include some code because I am at a loss! @username_1  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2018-11-28. Score: 3 | Accepted answer
  
  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()](http://api.jquery.com/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 by username_1 on 2018-11-07. Score: 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.[![enter image description here](https://i.sstatic.net/7x2gW.png)](https://i.sstatic.net/7x2gW.png)
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_1**: If it's any help I added a pic. Also is it still not working if you do the jQuery on the Console?  
  > **username_0**: We may be on different versions of Civi or CMS (I'm in Drupal 7) https://pasteboard.co/HM4CPA5.png  
  > **username_0**: I haven't tried directly in the console yet (I assume I can do that in Firefox's developer tools?)  
  > **username_1**: 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  
  > **username_0**: A) a million thanks I didn't know I could test jquery right in the console! B) yes the jquery is effective in the console. I'm wondering if the extra template is loading too early to affect the custom fields. I am going to test the jquery in an override template file (that's not .extra) and inside of a core template file. Just to learn where the jquery load and custom fields load might be happening.  
  
  ---
  
  