function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
FastSnailFastSnail 

Dynamic behavior between 2 components in the same VF page. Best method?

Hello everyone,
My VF page without controler is built out of 2 Components, each one with its own controller.
Each component displays the same list of records, built through a SOQL method, in an ApexPageBlock, itself in an OutputPanel, with a Delete button for each record in the table.
When I delete a record in Component1, I want:
- the list to be updated in the Compoent1. This is easy,
- the list to be updated in the Component2, through a reRender or the like, without reloading the entire page.
Am I clear enough? What is the best Apex / VF method to achieve this?
Thanks in advance for your support, Best regards,
Jerome
@Karanraj@Karanraj
You can able to rerender/refresh from one component to another component in the same visualforce page it's going to work like normal rerender functionality, you have to keep the components which you want to refresh inside the output panel and you the can refer the id of the output panel in the visualforce component to refresh the page​ 
<apex:page>
<apex:outputPanel id="myComponentvf">
<c:VisualforceComponent1 />
</apex:outputPanel>
<c:visualforceComponent2 />
</apex:page>

In the visualforceComponent2 in the button rerender attribute mention the "myComponentvf" so whenever the button is clicked then it will just refresh the visualforcecomponent1 section alone, instead of entire visualforce page.
FastSnailFastSnail
Thank you for the quick response Karanrajs,
I understand what you wrote, but I guess one piece is missing, which is the DML update of the second component. What I want to achieve is the table in Component2 to be refreshed when a record is deleted in Component1. I guess I need to run mod2List() from the delete button. Below is code. Thanks again in advance for your help.

public class CNMod1Con{
public List<Contact> mod1List{get;set;}
public CNMod1Con(){
mod1List();
}
public VOID mod1List(){
mod1List = new List<Contact>([Select id, name from Contact where FirstName = 'Tom' ]);
}
public VOID delMod(){
ID modIdPam = ApexPages.currentPage().getParameters().get('modIdPam');
Contact modToDel = [select Id from Contact where Id=: modIdPam ];
try{
delete modToDel;
} catch (Exception e) {
system.debug('CNMod1Con().delMod() failed.'+e.getMessage() );
}
mod1List(); ///To refresh table on page
}
public class CNMod2Con{
public List<Contact> mod2List{get;set;}
public CNMod2Con(){
mod2List();
}
public VOID mod2List(){
mod2List = new List<Contact>([Select id, name from Contact where FirstName = 'Tom' ]);
}
}
PAGE
<apex:page showHeader="false" sidebar="false" >
<apex:form>
<apex:outputPanel id="aopMod2List" >
Component2
<c:CNMod2 />
</apex:outputPanel>
<br/><br/>
Component1
<c:CNMod1 />
</apex:form>
</apex:page>
COMPONENT1
<apex:component controller="CNMod1Con" allowDML="true" >
<apex:PageBlock >
<apex:PageBlockTable value="{!mod1List}" var="mod" id="apbt1" >
<apex:column value="{!mod.name}" />
<apex:column >
<apex:commandButton value="delete" action="{!delMod}" reRender="apbt1, aopMod2List" >
<apex:param name="modIdPam" value="{!mod.id}" />
</apex:commandButton>
</apex:column>
</apex:PageBlockTable>
</apex:PageBlock>
</apex:component>
COMPONENT2
<apex:component controller="CNMod2Con" allowDML="true" >
<apex:PageBlock >
<apex:PageBlockTable value="{!mod2List}" var="mod" >
<apex:column value="{!mod.name}" />
</apex:PageBlockTable>
</apex:PageBlock>
</apex:component>