Answers.Body: <p>You cannot always predict the id or name for custom field for an activity, it is either <code>custom_385_14</code>(incase of saved custom field for activity where 14 is id from custom value table) or <code>custom_385_-1</code> incase of new one.</p>
  
  <p>I always follow below snippet to work incase of custom field and it does call my change event when i change option from select dropdown. I believe you choosed wrong id to actually call change event.</p>
  
  <pre><code>CRM.$(function($) {
    $("div#customData select[data-api-field='custom_385']").change(function() {
      $("#subject").val($(this).val());
    });
  });
  </code></pre>
  
  <p>Or </p>
  
  <blockquote>
    <p>Try after installing the extension
    <a href="https://github.com/pradpnayak/org.civicrm.jsoncaseactivity" rel="nofollow noreferrer">https://github.com/pradpnayak/org.civicrm.jsoncaseactivity</a> . I have
    added the JS in
    <a href="https://github.com/pradpnayak/org.civicrm.jsoncaseactivity/blob/master/templates/CRM/Case/Form/Activity.extra.tpl" rel="nofollow noreferrer">https://github.com/pradpnayak/org.civicrm.jsoncaseactivity/blob/master/templates/CRM/Case/Form/Activity.extra.tpl</a></p>
  </blockquote>
  
  <p>HTH</p>
  
  <p>Pradeep</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T15:27:06.947Z
Answers.Text: Sorry but that doesn't seem to do anything, Pradeep. I'm using drupal theme, attaching JS file. Do I need to add this to a custom Civi JS file instead?
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T15:29:48.957Z
Answers.Text: On which form are you trying to add JS to?
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T17:58:38.963Z
Answers.Text: It's on the Case - Activity - Edit screen.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T19:14:17.123Z
Answers.Text: Voted this answer down, as I was't having problems initiating JQuery. The question is how to trigger an event from the drop down list changing.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T19:17:53.950Z
Answers.Text: In what sense my answer is wrong? I am not convinced how are you trying to achieve this. Are you using correct select field id? You have provided limited information and we still trying to help you as a pro bono.
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T19:19:26.147Z
Answers.Text: Did you also try after clearing your CiviCRM cache??
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T08:46:42.783Z
Answers.Text: Well, the answer wasn't wrong, but doesn't answer the question guys. Please edit the answer and I will vote it up (I can't vote up until it's edited). Sorry to offend, feel free to edit the answer. No offence mean't, just trying to focus discussion.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T08:47:01.440Z
Answers.Text: Yes, clearing cache, Pardeep.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T09:51:50.280Z
Answers.Text: Updated my answer after going through forms for case.
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T11:26:34.963Z
Answers.Text: Thank you, Pardeep. That's getting closer to the issue, but still no event being captured. I've added the HTML source to the question.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T11:29:45.343Z
Answers.Text: If I do alert($("div#customData select[data-api-field='custom_385']")) I get "undefined", then after that the Activity form gets initialised. So it just seems to be a race condition with the smarty code?
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T12:13:30.393Z
Answers.Text: Daren, Updated my ans to include extension link that i tried on my local machine with simple D7 and CiviCRM 5.3.0 install and it worked fine.
Answers.UserDisplayName: Pradeep Nayak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T15:18:54.150Z
Answers.LastActivityDate: 2018-07-13T12:12:32.493Z
Answers.LastEditDate: 2018-07-13T12:12:32.493Z
Answers.UserDisplayName: Pradeep Nayak
Answers.Body: <p>I have struggled in the past to add JS behaviours to elements rendered by CiviCRM. But then I came across "extra templates" as described here. <a href="https://civicrm.org/blog/dave-greenberg/now-its-easier-add-custom-behaviors-templates" rel="nofollow noreferrer">https://civicrm.org/blog/dave-greenberg/now-its-easier-add-custom-behaviors-templates</a> and I have had success with that method.</p>
  
  <p>You can put them in your configured Custom Templates directory or you can put them in a CiviCRM extension.</p>
  
  <p>I don't think they work if you put them in a Drupal module, however.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T18:01:24.630Z
Answers.Text: Thanks for that pointer, Naomi. Looks promising. Will report back.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T18:41:55.560Z
Answers.Text: OK, that's now inserting the code in the right place, but still not detecting a change to the drop down list value.... I'll update the question with more details.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T19:14:44.013Z
Answers.Text: Voted this answer down, as I was't having problems initiating JQuery. The question is how to trigger an event from the drop down list changing.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T20:10:22.007Z
Answers.Text: I suggest you go have a look at the rules about downvoting! You are not supposed to vote down an answer just because you tried it and you couldn't get it to work. It is for answers that are irrelevant or bad quality. Pradesh and I both gave very sensible suggestions that were worth trying, even if they didn't immediately solve your problem. Mine even helped you along, just not all the way! The right thing to do in that case is post a comment and just not accept the answer as a solution.
Answers.UserDisplayName: naomi
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T07:43:06.770Z
Answers.Text: @Darren - you're not going to get much help on this site or from this community if you downvote anything that doesn't exactly solve your problem.  No-one is obliged to help you but Naomi & Pradeep have kindly offered suggestions to help you resolve your issues. From your initial post it's not clear that your js is even being loaded or run.
Answers.UserDisplayName: Aidan
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T08:47:31.707Z
Answers.Text: Well, the answer wasn't wrong, but doesn't answer the question peeps. Please edit the answer and I will vote it up (I can't vote up until it's edited). Sorry to offend, feel free to edit the answer. No offence mean't, just trying to focus discussion.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T08:53:28.187Z
Answers.Text: I've clarified that I know how to embed Javascript.
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T08:57:01.167Z
Answers.Text: @Aidan How are we supposed to get to the correct answer without voting down ones that don't answer the original question?
Answers.UserDisplayName: Darren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-13T12:48:25.707Z
Answers.Text: @Darren Both answers were relevant to your original question given the limited information you provided.  You need the right jQuery to work with select2, and you need to make it work in the CiviCRM context.  You have the select2 documentation example which should take care of the jQuery part.  Pradeep was showing you how to use the enclosure correctly for Civi and Naomi was talking about how you get your js added within Civi.  These answers are also not just for your benefit but for those encountering similar issues. Just say what worked for you - no need to downvote.
Answers.UserDisplayName: Aidan
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-12T16:44:08.863Z
Answers.LastActivityDate: 2018-07-12T16:44:08.863Z
Answers.UserDisplayName: naomi
Body: <p>My JavaScript is triggered correctly, but I <strong>cannot attach to the change event</strong> for a drop down list in CiviCRM.</p>
  
  <p>The ID of the actual select element is "custom_385_14".</p>
  
  <p>I am trying to attach an event to a drop down list in CiviCRM, which populates the "Subject" field of an Activity with the value from the drop down list. </p>
  
  <p>The actual input element doesn't seem to trigger the change event when the list value is changed. I've tried the following:-</p>
  
  <pre><code>$("#custom_385_14").change(function() {
              alert('test!');
             $("#subject").val($("#custom_385_14").val());
          });
  </code></pre>
  
  <p>******* UPDATE *********
  So thanks to Jon G pointing out Chosen isn't the library used, but Select2. According to their docs: <a href="https://select2.org/programmatic-control/events#listening-for-events" rel="nofollow noreferrer">https://select2.org/programmatic-control/events#listening-for-events</a> I should use the following:-</p>
  
  <pre><code>  $('#custom_385_14').on('select2:select', function (e) {
        alert('changed!');
    });
  </code></pre>
  
  <p>However this is still not triggering the event.</p>
  
  <p>I have searched the developer docs for civi and couldn't find an example of this, just a link to the Select2 docs here: <a href="https://docs.civicrm.org/dev/en/latest/framework/quickform/entityref/#select2" rel="nofollow noreferrer">https://docs.civicrm.org/dev/en/latest/framework/quickform/entityref/#select2</a></p>
  
  <p>HTML Source below for the <code>&lt;td&gt;</code> containing the select list:-</p>
  
  <pre><code> &lt;td class="html-adjust"&gt;
        &lt;div class="select2-container crm-select2 crm-form-select select2-allowclear" id="s2id_custom_385_14" style="width: 200px;"&gt;&lt;a href="javascript:void(0)" class="select2-choice" tabindex="-1"&gt;   &lt;span class="select2-chosen" id="select2-chosen-9"&gt;standard&lt;/span&gt;&lt;abbr class="select2-search-choice-close"&gt;&lt;/abbr&gt;   &lt;span class="select2-arrow" role="presentation"&gt;&lt;b role="presentation"&gt;&lt;/b&gt;&lt;/span&gt;&lt;/a&gt;&lt;label for="s2id_autogen9" class="select2-offscreen"&gt;tutorial type&lt;/label&gt;&lt;input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-9" id="s2id_autogen9"&gt;&lt;/div&gt;&lt;select class="crm-select2 crm-form-select" data-crm-custom="Tutorial_fee_details:tutorial_type" data-api-entity="Activity" data-api-field="custom_385" data-option-edit-path="civicrm/admin/options/tutorial_type_20180704095928" name="custom_385_14" id="custom_385_14" tabindex="-1" title="tutorial type" style="display: none;"&gt;
      &lt;option value=""&gt;- none -&lt;/option&gt;
      &lt;option value="1" selected="selected"&gt;introduction&lt;/option&gt;
      &lt;option value="2"&gt;standard&lt;/option&gt;
      &lt;option value="3"&gt;portfolio review&lt;/option&gt;
  &lt;/select&gt; 
  &lt;a href="/civicrm/admin/options/tutorial_type_20180704095928?reset=1" class="crm-option-edit-link medium-popup crm-hover-button" target="_blank" title="Edit Options" data-option-edit-path="civicrm/admin/options/tutorial_type_20180704095928"&gt;&lt;i class="crm-i fa-wrench"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/td&gt;
  </code></pre>
  
  <p>How can I use Jquery code to watch for when the values change in CiviCRM drop down lists?</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-07-12T15:38:41.607Z
Comments.Text: CiviCRM doesn't use Chosen, it uses Select2.  Hopefully that helps?
Comments.UserDisplayName: Jon G - Megaphone Tech
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-07-12T19:10:58.930Z
Comments.Text: OK, according to the docs from Select2 https://select2.org/programmatic-control/events#listening-for-events I have tried the following but still utter silence: CRM.$(function($) {
      $('#custom_385_14').on('select2:select', function (e) {
            alert('changed!');
      });
  });
Comments.UserDisplayName: Darren
Tags: <drupal><jquery><5.1.0>
Title: How to trigger JQuery event when drop down select list is changed in CiviCRM?
ThreadText: # How to trigger JQuery event when drop down select list is changed in CiviCRM?
  
  (Asked by: username_0 on 2018-07-12)
  
  My JavaScript is triggered correctly, but I cannot attach to the change event for a drop down list in CiviCRM.
  The ID of the actual select element is "custom_385_14".
  I am trying to attach an event to a drop down list in CiviCRM, which populates the "Subject" field of an Activity with the value from the drop down list. 
  The actual input element doesn't seem to trigger the change event when the list value is changed. I've tried the following:-
  $("#custom_385_14").change(function() {
              alert('test!');
             $("#subject").val($("#custom_385_14").val());
          });
  
  ******* UPDATE *********
  So thanks to Jon G pointing out Chosen isn't the library used, but Select2. According to their docs: https://select2.org/programmatic-control/events#listening-for-events I should use the following:-
    $('#custom_385_14').on('select2:select', function (e) {
        alert('changed!');
    });
  
  However this is still not triggering the event.
  I have searched the developer docs for civi and couldn't find an example of this, just a link to the Select2 docs here: https://docs.civicrm.org/dev/en/latest/framework/quickform/entityref/#select2
  HTML Source below for the  containing the select list:-
   
           standard   tutorial type
      - none -
      introduction
      standard
      portfolio review
   
  
            
  
  How can I use Jquery code to watch for when the values change in CiviCRM drop down lists?
  
  **Tags:** drupal, jquery, 5.1.0
  
  > **Comments:**
  > **username_1**: CiviCRM doesn't use Chosen, it uses Select2.  Hopefully that helps?  
  > **username_0**: OK, according to the docs from Select2 https://select2.org/programmatic-control/events#listening-for-events I have tried the following but still utter silence: CRM.$(function($) {     $('#custom_385_14').on('select2:select', function (e) {           alert('changed!');     }); });  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2018-07-12. Score: 2
  
  You cannot always predict the id or name for custom field for an activity, it is either custom_385_14(incase of saved custom field for activity where 14 is id from custom value table) or custom_385_-1 incase of new one.
  I always follow below snippet to work incase of custom field and it does call my change event when i change option from select dropdown. I believe you choosed wrong id to actually call change event.
  CRM.$(function($) {
    $("div#customData select[data-api-field='custom_385']").change(function() {
      $("#subject").val($(this).val());
    });
  });
  
  Or 
  
  Try after installing the extension
    https://github.com/pradpnayak/org.civicrm.jsoncaseactivity . I have
    added the JS in
    https://github.com/pradpnayak/org.civicrm.jsoncaseactivity/blob/master/templates/CRM/Case/Form/Activity.extra.tpl
  
  HTH
  Pradeep
  
  > **Comments:**
  > **username_0**: Sorry but that doesn't seem to do anything, Pradeep. I'm using drupal theme, attaching JS file. Do I need to add this to a custom Civi JS file instead?  
  > **username_2**: On which form are you trying to add JS to?  
  > **username_0**: It's on the Case - Activity - Edit screen.  
  > **username_0**: Voted this answer down, as I was't having problems initiating JQuery. The question is how to trigger an event from the drop down list changing.  
  > **username_2**: In what sense my answer is wrong? I am not convinced how are you trying to achieve this. Are you using correct select field id? You have provided limited information and we still trying to help you as a pro bono.  
  > **username_2**: Did you also try after clearing your CiviCRM cache??  
  > **username_0**: Well, the answer wasn't wrong, but doesn't answer the question guys. Please edit the answer and I will vote it up (I can't vote up until it's edited). Sorry to offend, feel free to edit the answer. No offence mean't, just trying to focus discussion.  
  > **username_0**: Yes, clearing cache, Pardeep.  
  > **username_2**: Updated my answer after going through forms for case.  
  > **username_0**: Thank you, Pardeep. That's getting closer to the issue, but still no event being captured. I've added the HTML source to the question.  
  > **username_0**: If I do alert($("div#customData select[data-api-field='custom_385']")) I get "undefined", then after that the Activity form gets initialised. So it just seems to be a race condition with the smarty code?  
  > **username_2**: Daren, Updated my ans to include extension link that i tried on my local machine with simple D7 and CiviCRM 5.3.0 install and it worked fine.  
  
  ---
  
  ### Answer by username_3 on 2018-07-12. Score: 0
  
  I have struggled in the past to add JS behaviours to elements rendered by CiviCRM. But then I came across "extra templates" as described here. <https://civicrm.org/blog/dave-greenberg/now-its-easier-add-custom-behaviors-templates> and I have had success with that method.
  
  You can put them in your configured Custom Templates directory or you can put them in a CiviCRM extension.
  
  I don't think they work if you put them in a Drupal module, however.
  
  > **Comments:**
  > **username_0**: Thanks for that pointer, Naomi. Looks promising. Will report back.  
  > **username_0**: OK, that's now inserting the code in the right place, but still not detecting a change to the drop down list value.... I'll update the question with more details.  
  > **username_0**: Voted this answer down, as I was't having problems initiating JQuery. The question is how to trigger an event from the drop down list changing.  
  > **username_3**: I suggest you go have a look at the rules about downvoting! You are not supposed to vote down an answer just because you tried it and you couldn't get it to work. It is for answers that are irrelevant or bad quality. Pradesh and I both gave very sensible suggestions that were worth trying, even if they didn't immediately solve your problem. Mine even helped you along, just not all the way! The right thing to do in that case is post a comment and just not accept the answer as a solution.  
  > **username_4**: @username_0 - you're not going to get much help on this site or from this community if you downvote anything that doesn't exactly solve your problem.  No-one is obliged to help you but Naomi & Pradeep have kindly offered suggestions to help you resolve your issues. From your initial post it's not clear that your js is even being loaded or run.  
  > **username_0**: Well, the answer wasn't wrong, but doesn't answer the question peeps. Please edit the answer and I will vote it up (I can't vote up until it's edited). Sorry to offend, feel free to edit the answer. No offence mean't, just trying to focus discussion.  
  > **username_0**: I've clarified that I know how to embed Javascript.  
  > **username_0**: @username_4 How are we supposed to get to the correct answer without voting down ones that don't answer the original question?  
  > **username_4**: @username_0 Both answers were relevant to your original question given the limited information you provided.  You need the right jQuery to work with select2, and you need to make it work in the CiviCRM context.  You have the select2 documentation example which should take care of the jQuery part.  Pradeep was showing you how to use the enclosure correctly for Civi and Naomi was talking about how you get your js added within Civi.  These answers are also not just for your benefit but for those encountering similar issues. Just say what worked for you - no need to downvote.  
  
  ---
  
  