Select and edit wrapper rows in pageBlockTable using Javascript

Question

I have a custom visualforce page that displays a list of records in an apex pageblocktable, and have input fields in the cells to change field values of the records. I also have a column of checkboxes to select records from the table( https://developer.salesforce.com/page/Wrapper_Class)

I want to select some records, and when I change one field value of a selected record, then that field of all the other selected records should also reflect that change. Is there a way to do this only on the client side with javascript?

eg: There are 10 records (rows) in the pageblocktable and each record has 3 fields(columns), Name, age and salary. If I select 5 rows (using the checkbox), and change the salary of one row to 50000, then all 5 selected rows should show a salary of 50000.

Answer 1

It can be done using client side javascript. To get exact Id of the element, you can use "Inspect Element" option in chrome. Basically salesforce will add the entire path of parent apex elements in the ID of child element. For example check sample code below,

<apex:page id="page">
    <apex:form id="form">
        <apex:pageblockTable id="table">
            <apex:inputField value="{!testvalue}" id="field"/>
        </apex:pageblockTable>
    </apex:form>
</apex:page>

It will result in final Id of the field as

page:form:table:field

instead of simple "field". If you are using rerender on the field using apex tags, you can directly use Id "field". But if you are using javascript, you need to use the full ID, which is the actual Id.

Answer 2

As well as the prefixing that Victor describes, a row index is also added to the ID to ensure all the ID values are unique. So when writing JavaScript to deal with apex:pageblockTable generated output, it can be easier to make use of CSS classes (that have no styles associated) as column markers rather than try to generate the ID values.

Here is an example. I'm afraid it isn't your problem but rather how to have the product of two fields in each row displayed in a third field. But it illustrates the use of the CSS classes plus how jQuery helps with handling the open ended number of rows and finding values in the same row.

The Visualforce:

<apex:pageBlockTable value="{!items}" var="item">
    <apex:column headerValue="{!$ObjectType.LineItem__c.fields.Days__c.label}">
        <apex:inputField value="{!item.Days__c}" styleClass="daysMarker"/>
    </apex:column>
    <apex:column headerValue="{!$ObjectType.LineItem__c.fields.RatePerDay__c.label}">
        <apex:inputField value="{!item.RatePerDay__c}" styleClass="ratePerDayMarker"/>
    </apex:column>
    <apex:column headerValue="{!$ObjectType.LineItem__c.fields.Amount__c.label}">
        <apex:inputField value="{!item.Amount__c}" styleClass="amountMarker"/>
    </apex:column>
</apex:pageBlockTable>

and the JavaScript to put at the end of the Visualforce:

<apex:includeScript value="{!URLFOR($Resource.jQueryZip, 'jquery.js')}" />
<script>
(function($) {
    $(document).ready(function() {
        var product = function(left, right, result) {
            if (isFloat(left.val()) && isFloat(right.val())) {
                result.val(parseFloat(left.val()) * parseFloat(right.val()));
            }
        };
        $('input.daysMarker').change(function() {
            var days = $(this);
            var rate = days.closest('tr').find('input.ratePerDayMarker');
            var amount = days.closest('tr').find('input.amountMarker');
            product(days, rate, amount);
        });
        $('input.ratePerDayMarker').change(function() {
            var rate = $(this);
            var days = rate.closest('tr').find('input.daysMarker');
            var amount = rate.closest('tr').find('input.amountMarker');
            product(days, rate, amount);
        });
    });

})(jQuery.noConflict());
</script>