onchange with Outputfield and inline editing

Question

I have a jquery popup that prompts a response from the user when they change the value of a particular field. This works fine when in edit mode as i can use onchange from apex:inputfield .

However, if i add inline editing to the view page i still need to have the popup appear if the user edits that fields but i dont have onchange available for outputfields. Any thoughts about how to get round this?

Thanks for any suggestions.

Answer 1

You can use jQuery to select the input that would eventually get submitted with the form and attach a change event handler to it. Every time that input changes the event handler would execute and you could display your lightbox from there. Depending on the location of your elements you may need to change the jQuery selector and/or placement of the wrapperClass styleClass in the code.

The following shows how it would work with an apex:pageBlockSectionItem (used that to preserve the formatting of a pageBlockSection), but you could use a different apex component, div, etc., as needed.

<apex:page standardController="Account">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <script type="text/javascript">
      var $j = jQuery.noConflict();
      $j(document).ready(function() {
          $j('.wrapperClass :hidden').change(function(e) {
              alert('Hidden input was changed');
          });
      });  
  </script>

  <apex:form >
      <apex:pageBlock >
          <apex:inlineEditSupport >
              <apex:pageBlockSection title="Account Fields">
                  <apex:pageBlockSectionItem dataStyleClass="wrapperClass">
                      <apex:outputLabel value="Account Name"/>
                      <apex:outputField value="{!Account.Name}"/>
                  </apex:pageBlockSectionItem>
              </apex:pageBlockSection>
          </apex:inlineEditSupport>
      </apex:pageBlock>
  </apex:form>
</apex:page>

Answer 2

I haven't tried it with all of the field types, but you can attach a MutationObserver to the output field to detect when the hidden input field is created or updated. I've tested it with multi-select picklists.

var inlineEditObserver = new MutationObserver(function(mutations) {
   mutations.forEach(function(mutation) {
      // might need to do additional filtering or debouncing
      promptUserAbout(mutation.target);
   });
});
var inlineEditFields = [].slice.call(document.querySelectorAll('.inlineEditWrite'));
inlineEditFields.forEach(function(el) {
   inlineEditObserver.observe(el, { childList: true, subtree: true });
});

Answer 3

Assuming the view page is your own Visualforce page, you could use apex:inlineEditSupport to register for events when the editing starts.

---

UPDATE: I'm not so sure about this now, it looked promising, but there doesn't appear to be an event that you could use to inject your script.

You might be able to use the CSS class change from changedStyleClass and jQuery to detect the event. E.g. Event detect when css property changed using Jquery