Answers.Body: <p><code>crmLoad</code> is triggered on every action. Try:</p>
  
  <pre><code>CRM.$(document).on('crmLoad', function(e, data) {
      console.log(data);
  })
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-16T15:04:50.173Z
Answers.Text: While this requires checking the data returned, this actually solves the issue.
Answers.UserDisplayName: igorpavlov
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-11T21:14:08.247Z
Answers.LastActivityDate: 2018-04-11T21:14:08.247Z
Answers.UserDisplayName: nielo
Answers.Body: <p>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. </p>
  
  <p>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. </p>
  
  <p>Be advised, if you follow the link in your question, it states very clearly that <em>"Normally, (aka nothing) on the server side needs to be done... to make a standard CiviCRM quickform/smarty page work with these helpers."</em>  </p>
  
  <p>And the page continues to read as follows: <em>" 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). "</em></p>
  
  <p>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. </p>
  
  <p>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? </p>
  
  <blockquote>
    <blockquote>
      <blockquote>
        <blockquote>
          <p>A bit more of a reply to your question</p>
        </blockquote>
      </blockquote>
    </blockquote>
  </blockquote>
  
  <p>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. </p>
  
  <ol>
  <li>You want to capture the page change event (personal contributions
  campaign page) for the object highlighted in green   </li>
  <li>You want to add a client-side event handler to the CiviCRM page
  generated element for the green highlighted event.  </li>
  <li>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?</li>
  </ol>
  
  <p>As a start on finding the right selector to hook your "onChange" event to, I suggest you:</p>
  
  <ol>
  <li>Open the page in your Chrome web browser.   </li>
  <li>Open Dev Tools once you have the Personal Contribution page open in the browser </li>
  <li>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.</li>
  </ol>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-10T13:16:47.967Z
Answers.Text: 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.
Answers.UserDisplayName: igorpavlov
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-11T13:35:56.303Z
Answers.Text: 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?
Answers.UserDisplayName: Pinnacle Systems Group
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-11T16:06:24.993Z
Answers.Text: Almost like that, I would like to simply listen to whatever "changes" the option group.
Answers.UserDisplayName: igorpavlov
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-10T08:15:21.210Z
Answers.LastActivityDate: 2018-04-10T08:59:09.953Z
Answers.LastEditDate: 2018-04-10T08:59:09.953Z
Answers.UserDisplayName: Pinnacle Systems Group
Answers.Body: <p>Ok, Just so I am clear on what you want. Your new question is: </p>
  
  <p>You want to: </p>
  
  <p>1). "Filter" using JavaScipt "ALL" the events on the CiviCRM  Personal Contributions Page and </p>
  
  <p>2) Set "handlers" to respond to "Onchange" events only when the users toggle the "Enable" and "Disable" elements on the PCC page?</p>
  
  <p>Is that correct?</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-11T16:05:22.900Z
Answers.Text: This should be a comment rather than an answer, I think.
Answers.UserDisplayName: igorpavlov
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-11T13:42:09.553Z
Answers.LastActivityDate: 2018-04-11T13:42:09.553Z
Answers.UserDisplayName: Pinnacle Systems Group
Body: <p>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.</p>
  
  <p>As per <a href="https://docs.civicrm.org/dev/en/latest/framework/ajax/" rel="nofollow noreferrer">https://docs.civicrm.org/dev/en/latest/framework/ajax/</a> there are a couple of events related to dialogue forms that you can track, including <code>crmFormSuccess</code>. This event will fire on the label change, or new element addition, but not on the enabling/disabling or reordering. </p>
  
  <p><a href="https://i.sstatic.net/d4J7u.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/d4J7u.png" alt="enter image description here"></a></p>
  
  <p>The code snippet:</p>
  
  <pre><code>CRM.loadForm('/civicrm/admin/options/individual_suffix?reset=1')
    .on('crmFormSuccess', () =&gt; {
      // will not trigger on reordering or enabling/disabling
      console.log('Updated...');
    });
  </code></pre>
  
  <p>Is there a similar event to handle these events as well?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-11T08:45:53.520Z
Comments.Text: 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);
  });
Comments.UserDisplayName: nielo
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-11T16:04:47.063Z
Comments.Text: @nielo Good idea, but the thing is that 'crmLoad' will not actually be triggered when you, for example, disable the option (nothing actually loads).
Comments.UserDisplayName: igorpavlov
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-11T19:47:44.850Z
Comments.Text: How could the server know of such actions if nothing is posted.
Comments.UserDisplayName: nielo
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-11T21:04:05.103Z
Comments.Text: If I disable an option, I receive /civicrm/admin/options/individual_suffix?snippet=json.
Comments.UserDisplayName: nielo
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-16T15:06:18.490Z
Comments.Text: Right @nielo, it does load indeed.
Comments.UserDisplayName: igorpavlov
Tags: <civievent><ajax><option>
Title: https://docs.civicrm.org/dev/en/latest/framework/ajax/
ThreadText: # https://docs.civicrm.org/dev/en/latest/framework/ajax/
  
  (Asked by: username_0 on 2018-04-06)
  
  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. 
  
  The code snippet:
  CRM.loadForm('/civicrm/admin/options/individual_suffix?reset=1')
    .on('crmFormSuccess', () => {
      // will not trigger on reordering or enabling/disabling
      console.log('Updated...');
    });
  
  Is there a similar event to handle these events as well?
  
  **Tags:** civievent, ajax, option
  
  > **Comments:**
  > **username_1**: 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); });  
  > **username_0**: @username_1 Good idea, but the thing is that 'crmLoad' will not actually be triggered when you, for example, disable the option (nothing actually loads).  
  > **username_1**: How could the server know of such actions if nothing is posted.  
  > **username_1**: If I disable an option, I receive /civicrm/admin/options/individual_suffix?snippet=json.  
  > **username_0**: Right @username_1, it does load indeed.  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_1 on 2018-04-11. Score: 2 | Accepted answer
  
  crmLoad is triggered on every action. Try:
  CRM.$(document).on('crmLoad', function(e, data) {
      console.log(data);
  })
  
  > **Comments:**
  > **username_0**: While this requires checking the data returned, this actually solves the issue.  
  
  ---
  
  ### Answer by username_2 on 2018-04-10. Score: 1
  
  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.
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_2**: 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?  
  > **username_0**: Almost like that, I would like to simply listen to whatever "changes" the option group.  
  
  ---
  
  ### Answer by username_2 on 2018-04-11. Score: -1
  
  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?
  
  > **Comments:**
  > **username_0**: This should be a comment rather than an answer, I think.  
  
  ---
  
  