0

I just try to get the field value from inputField, that inside apex:column tag in PageBlockTable. I'v tried a different ways, but still no result. I've tried the next methods:

function testinputJS(elem){
   alert(j$(elem).find(".accId").html());
}

document.getElementById('{!$Component.Form.PageBlock.screens.sec.f2b.t.testinput}').value;

document.getElementById('testinput').value;

Here is my page:

<apex:page tabStyle="Fee_Schedules__c" controller="CommissionController" sidebar="false" doctype="html-5.0">
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
<script type="text/javascript">
        j$ = jQuery.noConflict();

        function testinputJS(elem){
       alert(j$(elem).find(".accId").html());
    }
</script>

<apex:form id="Form">
    <apex:sectionHeader subtitle="Commission Settings Wizard"/>
    <apex:outputPanel >
        <apex:pageMessages escape="false" id="messages"/>
    </apex:outputPanel>
    <apex:PageBlock id="PageBlock">

    <apex:pageBlockButtons location="bottom">
        <apex:outputPanel id="buttons">
            <apex:actionStatus id="prevActionStatus" >
                <apex:facet name="start" >
                    <img src="/img/loading.gif" />
                </apex:facet>
                <apex:facet name="stop">
                    <apex:commandButton id="prev" value="{!$Label.Prev}" rendered="{!NOT(FORM1)}" action="{!prev}" style="padding: 5px;" status="prevActionStatus" reRender="messages,screens,buttons" immediate="true"/>
                </apex:facet>
            </apex:actionStatus>
            <apex:actionStatus id="nextActionStatus" >
                <apex:facet name="start" >
                    <img src="/img/loading.gif" />
                </apex:facet>
                <apex:facet name="stop">
                    <apex:commandButton id="next" value="{!$Label.Next}" rendered="{!FORM1 || FORM2 || FORM2SET}" action="{!next}" style="padding: 5px;" status="nextActionStatus" reRender="messages,screens,buttons"/>
                </apex:facet>
            </apex:actionStatus>
            <apex:actionStatus id="saveActionStatus" >
                <apex:facet name="start" >
                    <img src="/img/loading.gif" />
                </apex:facet>
                <apex:facet name="stop">                
                    <apex:commandButton id="save" value="{!$Label.Save}" rendered="{!NOT(FORM1) && NOT(FORM2) && NOT(FORM2SET)}" action="{!Save}" style="padding: 5px;" status="nextActionStatus" reRender="messages,screens,buttons"/>
                </apex:facet>
            </apex:actionStatus>                  
        </apex:outputPanel>
        <button style="padding: 5px;" onclick="javascript:top.location.assign('{!ReturnUrl}');return false;">{!$Label.Back}</button> 
    </apex:pageBlockButtons>

    <apex:outputPanel id="screens"> 
        <style type="text/css">
            .Dependent {color: black;}
            select:disabled {
                background: #ffffff;
                color: #000000;
            }
        </style>
        <apex:pageBlockSection title="{!PageBlockTitle}" columns="1" id="sec">
            <apex:outputPanel rendered="{!FORM1}">
            Please choose setting:
                <apex:pageBlockSectionItem >
                    <apex:outputPanel >
                        <div class="requiredInput requiredInput-bcs">
                            <div class="requiredBlock"></div>
                            <apex:selectRadio value="{!SelectedSetting}" label="Type" layout="pageDirection" required="true">
                                <apex:selectOptions value="{!Settings}" />
                            </apex:selectRadio>
                        </div> 
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:outputPanel> 

            <apex:outputPanel rendered="{!FORM2}">
            Please choose venue:
                <apex:pageBlockSectionItem >
                    <apex:outputPanel >
                        <div class="requiredInput requiredInput-bcs">
                            <div class="requiredBlock"></div>
                            <apex:selectRadio value="{!SelectedVenue}" label="Type" layout="pageDirection" required="true" immediate="true">
                                <apex:selectOptions value="{!Venues}" />
                            </apex:selectRadio>
                        </div> 
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:outputPanel>                        

            <apex:outputPanel rendered="{!FORM2SET}">
            Please choose setting:
                <apex:pageBlockSectionItem >
                    <apex:outputPanel >
                        <div class="requiredInput requiredInput-bcs">
                            <div class="requiredBlock"></div>
                            <apex:selectRadio value="{!SelectedChoices}" label="Type" layout="pageDirection" required="true">
                                <apex:selectOptions value="{!Choices}" />
                            </apex:selectRadio>
                        </div> 
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:outputPanel>

            <apex:outputPanel rendered="{!FORM2AOTC}">
                <apex:PageBlockTable value="{!OTC}" var="f" style="width:70%">
                    <apex:column headerValue="Market/Venue" value="{!f.Commission_for__c}"/>                           
                    <apex:column headerValue="Rate">
                        <apex:InputField value="{!f.Rate__c}" />
                    </apex:column>
                    <apex:column headerValue="Rate Units" value="{!f.Rate_Units__c}"/>
                    <apex:column headerValue="Clearing and Exchange fees" value="{!f.X3rd_party_costs__c}"/>
                    <apex:column headerValue="Payment Currency " value="{!f.Payment_Currency__c}"/>
                    <apex:column headerValue="Payment date" value="{!f.Payment_Date__c}" />
                    <apex:column headerValue="Minimum Commission" >
                        <apex:repeat value="{!MinimumChargeOTC}" var="m">
                            <apex:InputField value="{!m.Rate__c}" />
                        </apex:repeat>
                    </apex:column>                                                   
                </apex:PageBlockTable>                                             
            </apex:outputPanel> 

            <apex:outputPanel rendered="{!FORM2AOther}">
                <apex:PageBlockTable value="{!Flat}" var="f" style="width:70%">
                    <apex:column headerValue="Market/Venue">
                        <apex:InputField value="{!f.Commission_for__c}" html-disabled="true" styleClass="disabled"/>
                    </apex:column>                         
                    <apex:column headerValue="Rate">
                        <apex:InputField value="{!f.Rate__c}" />
                    </apex:column>
                    <apex:column headerValue="Rate Units" value="{!f.Rate_Units__c}"/>
                    <apex:column headerValue="Clearing and Exchange fees">
                        <apex:inputField value="{!f.X3rd_party_costs__c}"/>
                    </apex:column>
                    <apex:column headerValue="Payment Currency">
                        <apex:inputField value="{!f.Payment_Currency__c}"/>
                    </apex:column>
                    <apex:column headerValue="Payment date" value="{!f.Payment_Date__c}" />
                    <apex:column headerValue="Minimum Commission" >
                        <apex:repeat value="{!MinimumChargeOTC}" var="m">
                            <apex:InputField value="{!m.Rate__c}" />
                        </apex:repeat>
                    </apex:column>                                                   
                </apex:PageBlockTable>                                             
            </apex:outputPanel> 

            <apex:outputPanel rendered="{!FORM2B}" id="f2b">
                <apex:pageBlockSection columns="1">
                    <apex:pageblockSectionItem >
                        Market/Venue:<apex:outputLabel value="{!SelectedVenue}"/>
                    </apex:pageblockSectionItem>   
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Clearing and Exchange fees:" />
                        <apex:outputPanel >                                
                            <div class="requiredInput">
                                <div class="requiredBlock"></div>
                                <apex:SelectList size="1" value="{!Sel3rdPartyCosts}" required="true">
                                    <apex:selectOptions value="{!X3rdPartyCosts}"/>
                                </apex:SelectList>
                            </div>
                        </apex:outputPanel>
                    </apex:pageblockSectionItem>
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Payment Currency:" />
                        <apex:outputPanel >                                
                            <div class="requiredInput">
                                <div class="requiredBlock"></div>
                                <apex:SelectList size="1" value="{!SelPaymentCurrency}" required="true">
                                    <apex:selectOptions value="{!PaymentCurrency}"/>
                                </apex:SelectList> 
                            </div>
                        </apex:outputPanel>                  
                    </apex:pageblockSectionItem>
                    <apex:pageblockSectionItem >
                        Payment date:<apex:outputLabel value="Monthly"/>
                    </apex:pageblockSectionItem>                                             
                </apex:pageBlockSection>                                        

                <apex:PageBlockTable value="{!Scale}" var="f" style="width:70%" id="t">                              
                    <apex:column headerValue="Rate" id="col" >                            
                        <apex:InputField value="{!f.Rate__c}" id="testinput" onchange="testinputJS(this);" styleClass="accId"/>                           
                    </apex:column>
                    <apex:column headerValue="Rate Units" value="{!f.Rate_Units__c}"/>
                    <apex:column headerValue="Volume From"> 
                        <apex:InputField value="{!f.Volume_from__c}" html-disabled="true" styleClass="disabled"/> 
                    </apex:column>
                    <apex:column headerValue="Volume To"> 
                        <apex:InputField value="{!f.Volume_to__c}"/>   
                    </apex:column>
                    <apex:column headerValue="Volume Units" value="{!f.Volume_units__c}"/>                                                 
                </apex:PageBlockTable>
                <apex:commandbutton value="Add" action="{!Add}"/>   
                <apex:commandbutton value="Remove" action="{!Remove}"/>                                            
            </apex:outputPanel>       

            <apex:outputPanel rendered="{!FORM2D}">
                <apex:PageBlockTable value="{!MonthlyFixed}" var="f" style="width:70%">
                    <apex:column headerValue="Market/Venue" value="{!f.Commission_for__c}"/>                           
                    <apex:column headerValue="Rate">
                        <apex:InputField value="{!f.Rate__c}" />
                    </apex:column>
                    <apex:column headerValue="Payment Currency " value="{!f.CurrencyISOCode}"/>
                    <apex:column headerValue="Clearing and Exchange fees" value="{!f.X3rd_party_costs__c}"/>
                    <apex:column headerValue="Payment date" value="{!f.Payment_Date__c}" />                                                   
                </apex:PageBlockTable>                                             
            </apex:outputPanel>                                           

            <apex:outputPanel rendered="{!FORM1A}">
                <apex:PageMessage summary="<u>Please Note:</u> <b>Margin Ledning Rate = Benchmark rate + Fee rate</b>" severity="Info" escape="false"/>                                            
                <apex:PageBlockTable value="{!Margin}" var="M" style="width:40%">
                    <apex:column headerValue="Commission Name">
                        <apex:InputField value="{!M.Commission_for__c}" html-disabled="true" styleClass="disabled"/>
                    </apex:column>
                    <apex:column headerValue="Benchmark rate" value="{!M.Benchmark__c}"/>
                    <apex:column headerValue="Fee">
                        <apex:InputField value="{!M.Rate__c}" />
                    </apex:column>
                    <apex:column headerValue="Fee Units" value="{!M.Rate_Units__c}"/>
                    <apex:column headerValue="Payment date">
                        <apex:InputField value="{!M.Payment_Date__c}"/>
                    </apex:column>
                </apex:PageBlockTable>
            </apex:outputPanel>

            <apex:outputPanel rendered="{!FORM1B}">
                <apex:PageBlockTable value="{!Other}" var="OT" style="width:35%">
                    <apex:column headerValue="Commission Name" value="{!OT.Commission_for__c}"/>
                    <apex:column headerValue="Rate">
                        <apex:InputField value="{!OT.Rate__c}"/>
                    </apex:column>
                    <apex:column headerValue="Rate Units" value="{!OT.Rate_Units__c}"/>
                    <apex:column headerValue="3rd party costs" value="{!OT.X3rd_party_costs__c}"/>
                </apex:PageBlockTable>
            </apex:outputPanel>                                                          

        </apex:pageBlockSection>
    </apex:outputPanel>
</apex:PageBlock>

Improve this question

1 Answer 1

Reset to default
1

If you're trying to access data within a table in visualforce you want to use the "styleClass" attribute because it will help you avoid dealing with the annoying ID scheme of visualforce components.

<apex:pageBlockTable styleClass="theTable" value="{!records}" var="record">
    <apex:column headerValue="Field Label">
        <apex:outputText value="{!record.field}" styleClass="fieldLabel" />
    </apexColumn>
</apex:pageBlockTable>

Disclaimer

Below is just a single method of achieving this and needs to be adapted to your needs.

If you need additional help regarding the following JavaScript, you can visit StackOverflow for more in depth explanation as to whats going on.

Example of Using Classes Instead of Ids

I used Jquery on document ready to pull in the table by class and than loop through the rows of the table to construct an object in javascript that has references to all of the elements that I need in the table such as <span> elements or <input> elements. Then I can use this object to easily read and update the table without traversing the DOM over and over again.

var j$ = jQuery.noConflict();
var table = {
    rows : []
};

var row = function(index, theRow) {
    theRow= j$(theRow);
    var field = theRow.find('.fieldLabel');

    return {
        index: index,
        field : field
    };
}

j$(document).ready(function(){
    j$('.theTable').find('tbody tr').each(function(index, row) {
        table.rows[index] = new row(index, row);
    });

    console.log(table);
});

Now that you have your table you can reference it via JavaScript. In my case we needed to dynamically calculate the cost of a line item as quantity price and discount fields were updated. I achieved this by binding events to input fields.

Change the row constructor to something like:

var row = function(index, theRow) {
    theRow= j$(theRow);
    var field = theRow.find('.fieldLabel');
    var field2 = theRow.find('.field2Label');

    field2.on('keyup', {data:index}, calculateRow);

    return {
        index: index,
        field : field,
        field2 : field2
    };
}

Then define the calculate method:

function calculateRow(event) {
    var index = event.data.index;
    var theRow = table.rows[index];
    theRow.field2.val(theRow.field.val()*2);
}

References:

Improve this answer
6
  • Hi, Thanks for comment! I want to pass field value onchange event, how can I call function onchange from input field? Commented May 16, 2018 at 15:04
  • made something like this <script type="text/javascript"> var j$ = jQuery.noConflict(); var table = {rows : []}; var row = function(index, row) { row = j$(row); var field = row.find('.fieldLabel'); field.on('change', {data:index}, calculateRow); return { index: index, field : field, }; } function calculateRow(event) { var index = event.data.index; var row = table.rows[index]; row.field.val(); alert(row.field.val()); } </script> Commented May 16, 2018 at 15:12
  • Did it work? did you get any errors? Always check the f12 console if something doesn't work. Commented May 16, 2018 at 15:18
  • sorry don't understand. I must to call calculateRow() function in onchange attribute on InputField? But what is event? The above javascript doen't invoked. Commented May 16, 2018 at 15:22
  • I've updated my answer, the takeaway here is, don't use the Id, use the class. If you use the class you can avoid the issues you have with Id. This is however, a Salesforce Q&A board so if you're having trouble understanding the JavaScript I posted you may want to visit StackOverflow for some help with JavaScript. Commented May 16, 2018 at 15:29

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.