I would like to open a modal with options editor inside (please see the screenshot below). I would like to call a custom JavaScript function whenever an option has been changed via that modal. By "changed" I mean added, renamed, deleted, disabled, reordered etc.

As per https://docs.civicrm.org/dev/en/latest/framework/ajax/ there are a couple of events related to dialogue forms that you can track, including crmFormSuccess. This event will fire on the label change, or new element addition, but not on the enabling/disabling or reordering.

enter image description here

The code snippet:

  .on('crmFormSuccess', () => {
    // will not trigger on reordering or enabling/disabling

Is there a similar event to handle these events as well?

  • Did you check returned data of crmLoad event? Maybe cou can decide what has been posted: .on('crmLoad', function(event, data) { console.log(event); console.log(data); });
    – nielo
    Commented Apr 11, 2018 at 8:45
  • @nielo Good idea, but the thing is that 'crmLoad' will not actually be triggered when you, for example, disable the option (nothing actually loads).
    – igorpavlov
    Commented Apr 11, 2018 at 16:04
  • How could the server know of such actions if nothing is posted.
    – nielo
    Commented Apr 11, 2018 at 19:47
  • If I disable an option, I receive /civicrm/admin/options/individual_suffix?snippet=json.
    – nielo
    Commented Apr 11, 2018 at 21:04
  • Right @nielo, it does load indeed.
    – igorpavlov
    Commented Apr 16, 2018 at 15:06

3 Answers 3


crmLoad is triggered on every action. Try:

CRM.$(document).on('crmLoad', function(e, data) {
  • While this requires checking the data returned, this actually solves the issue.
    – igorpavlov
    Commented Apr 16, 2018 at 15:04

I'm new here so I'm not sure what protocol to follow to explain 1) how to receive notifications from CiviCRM for the events shown in your screenshot of the CiviCRM Admin panel and 2) what you mean when, in terms of code, when you ask if there is a 'neat' way. In both Drupal, and by extension, CiviCRM there is More Than One Way to Do It.

Next, it's not clear from your questions whether you are looking for a "client-side" way to steer the page events to a handler you have written or you are trying to do something on the server side of things. I presume you already know how to capture and steer page events on the client side from jQuery.

Be advised, if you follow the link in your question, it states very clearly that "Normally, (aka nothing) on the server side needs to be done... to make a standard CiviCRM quickform/smarty page work with these helpers."

And the page continues to read as follows: " If the client-side script requires more information, simply add to $this->ajaxReponse(array (automatically available to all classes that extend CRM_Core_Page or CRM_Core_Form). "

That said, the best way anyone can really help you is to know what you are attempting to do that is not explained on that web page.

Could you please write back and tell everyone what you are attempting to do and we can try to help you with a specific answer?

A bit more of a reply to your question

I dug a bit deeper into the links in your posted question. While I think I understand a bit better what you are asking, here is a summary of what I understand which you can reply as being "correct" or not.

  1. You want to capture the page change event (personal contributions campaign page) for the object highlighted in green
  2. You want to add a client-side event handler to the CiviCRM page generated element for the green highlighted event.
  3. Your client-side event handler want to know which "selector" on the personal contributions campaign page it should use to attach the event handler to. Is that the answer you are looking for?

As a start on finding the right selector to hook your "onChange" event to, I suggest you:

  1. Open the page in your Chrome web browser.
  2. Open Dev Tools once you have the Personal Contribution page open in the browser
  3. Position your cursor (Hover) on the page element in the PCC page Look at the Dev Tools panel and it should display the HTML selector for that element.
  • Thanks for the reply. Edited the question. I would basically like to track all changes in a similar way it is written in the JS snippet.
    – igorpavlov
    Commented Apr 10, 2018 at 13:16
  • Ok, Just so I am clear on what you want. Your new question is: You want to: 1). "Filter" using JavaScipt "ALL" the events on the CivicCRM Personal Contributions Page and 2) Set "handlers" for "Onchange" events only Is that correct? Commented Apr 11, 2018 at 13:35
  • Almost like that, I would like to simply listen to whatever "changes" the option group.
    – igorpavlov
    Commented Apr 11, 2018 at 16:06

Ok, Just so I am clear on what you want. Your new question is:

You want to:

1). "Filter" using JavaScipt "ALL" the events on the CiviCRM Personal Contributions Page and

2) Set "handlers" to respond to "Onchange" events only when the users toggle the "Enable" and "Disable" elements on the PCC page?

Is that correct?

  • 1
    This should be a comment rather than an answer, I think.
    – igorpavlov
    Commented Apr 11, 2018 at 16:05

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.