I want to add new row along with name value to table B when a name value is entered in a table A . It works fine when we update the value and focus on some where else other than Add row button in Table A. Issue is where when we change the name value and clicking directly on add new row button in Table A then the exiting value in table B is updating rather creating a new row In This case two table has to rerender at the same time.

Visualforce code:

      <apex:commandButton value="Add Consumer" action="{!addNewConsumer}"  reRender="dc"  />

 <apex:repeat value="{!tableAlist}" var="a" id="tableA">

            <apex:pageBlockSection columns="3" collapsible="false"  >

                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Consumer Name"/> 

                   <apex:inputField value="{!a.New_Consumer_Name__c}" id="ConsumerName"  onchange="createNewOwner('{!$Component.ConsumerName}');"/>


<apex:pageBlock title="Table B" id="Pb2">
 <apex:pageBlockTable value="{!tableBList}" var="h" id="tableB">

      <apex:column headerValue="Owner Name">

            <apex:inputField value="{!h.Consumer_Name__c}"  />



Contoller methods:

private list<Credit__c> CreditList;
public list<Credit__c> getTableAList(){

    if(CreditList == null ||  CreditList.size() == 0 ){

        CreditList = new list<Credit__c>();
        CreditList.add(new Credit__c());

    return CreditList;
public void addNewConsumer(){

    CreditList.add(new Credit__c());

private List<History__c>  HistoryList;
Public List<History__c> getTableBList(){

    if(HistoryList == null){
        HistoryList = new List<History__c>();
        HistoryList.add(new History__c());
    return HistoryList;


public void addnewOwnerName(){

   string conName = ApexPages.CurrentPage().getParameters().get('conName');

   HistoryList.add(new History__c(Consumer_Name__c = conName));             


After a bit of playing I was able to get this to work by creating 2 buttons, 1st one hidden and the 2nd one that gets clicked, sets focus on itself and calls the 2nd with a timeout.

<input type="button" id="primaryButton" onclick="actualCall()" style="display:none;"/>
<input type="button" id="secondaryButton" onclick="callButton()" value="Add Consumer"/>


function callButton() {
    setTimeout(function(){document.getElementById('primaryButton').click();}, 1000)
function actualCall() {

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.