How to trigger JQuery event when drop down select list is changed in CiviCRM?

Question

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 <td> containing the select list:-

 <td class="html-adjust">
      <div class="select2-container crm-select2 crm-form-select select2-allowclear" id="s2id_custom_385_14" style="width: 200px;"><a href="javascript:void(0)" class="select2-choice" tabindex="-1">   <span class="select2-chosen" id="select2-chosen-9">standard</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen9" class="select2-offscreen">tutorial type</label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-9" id="s2id_autogen9"></div><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;">
    <option value="">- none -</option>
    <option value="1" selected="selected">introduction</option>
    <option value="2">standard</option>
    <option value="3">portfolio review</option>
</select> 
<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"><i class="crm-i fa-wrench"></i></a>
          </td>

How can I use Jquery code to watch for when the values change in CiviCRM drop down lists?

Answer 1

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

Answer 2

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.