[SalesForce] onchange with Outputfield and inline editing

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.

Best Answer

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>
Related Topic