3

I have a pageblocktable something like this:

<apex:column>
    <apex:inputField value="{!opp.Name}" />
</apex:column>
<apex:column>           
   <apex:inputField value="{!opp.CloseDate}" />
</apex:column>
<apex:column width="2%">
   <apex:commandButton action="{!saveOpportunity}" value="Save" disabled>
      <apex:param value="saveOppId" name="column" assignTo="{!saveOppId}" >
      </apex:param>
    </apex:commandButton>
</apex:column>

I'm looking for a way to enable the save button when there is a change to any of the input fields in the row. There are many rows (opps) in the table so I want to only enable the button that goes with the row input field that changed. I looked at a few examples using jquery, but I could only find examples that disabled the button when it was clicked.

  • Also if someone could tell me how to enter my visualforce on this post so it shows up it would be greatly appreciated. – SkipVV Jun 14 '14 at 17:03
  • Generically speaking, you're going to need to create a function that somehow relates change event api.jquery.com/change in a form field of each row to the save button. – crmprogdev Jun 14 '14 at 17:04
  • On how to make your code appear, paste it and then use then select it all and then use the {} button. Or you can just manually indent by 4. Refresh as I've done that for you (twice now). – Keith C Jun 14 '14 at 17:06
  • You're right. I'm looking for an example if someone has a way to do that. Thanks! – SkipVV Jun 14 '14 at 17:12
  • I was doing the same thing to his code at that same time. LOL! – crmprogdev Jun 14 '14 at 17:12
2

Here is a fairly simple implementation. It assumes you've added styleClass="monitored" to the input fields and styleClass="target" to the button fields (though you could use other selectors if you like).

The code disables all the buttons when the page is loaded and for a couple of different events re-enables the buttons by finding the parent "tr" and from there finding the child button.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
    j$('.target').each(function() {
        j$(this)
            .attr('disabled', 'true')
            .addClass('btnDisabled')
            ;
    });
    j$('.monitored').bind('keyup change', function() {
        j$(this).closest('tr').find('.target')
            .removeAttr('disabled')
            .removeClass('btnDisabled')
            ;
    });
});
</script>

If you want to be more precise about the enabling, you can use the approach described in Monitoring a Form for Changes with jQuery.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.