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.

6
  • Also if someone could tell me how to enter my visualforce on this post so it shows up it would be greatly appreciated.
    – mackmama
    Jun 14, 2014 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, 2014 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, 2014 at 17:06
  • You're right. I'm looking for an example if someone has a way to do that. Thanks!
    – mackmama
    Jun 14, 2014 at 17:12
  • I was doing the same thing to his code at that same time. LOL!
    – crmprogdev
    Jun 14, 2014 at 17:12

1 Answer 1

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .