OutputPanel in Component Fails when Component is used more than once

Question

I have built a component with the intent to use it more than once per page. However, this causes an issue since I cannot set the Id of the apex:outputPanel dynamically. Any apex:actionFunction refresh call works fine while there is only one version of the component on a given page, but it fails once there are multiple (can't figure out which of the identically Id'd outputPanel's to refresh?). Anybody have a creative way around this?

Answer 1

The trick here is to provide an unique identifier for each component of the same type on the visualforce page. Then you need to set the unique actionFunction name based of this identifier, otherwise you will have several functions with the same name on the on visualforce page that is no good because of the referencing.

This example component gets a parameter "componentId" from the page. Then this parameter will be used to set a unique function name:

(the actionFunction here just changes the content of the "componentInput" variable so we van see where it was changed)

<apex:component controller="test2" id="comp">
    <apex:attribute name="componentId"
                    description="The unique id of this component" 
                    type="String"/>
    <apex:actionFunction name="{!componentId}"
                         action="{!reloadVar}"
                         reRender="componentPanel"/>
    <apex:outputPanel id="componentPanel">
        {!componentInput}
    </apex:outputPanel>
    <a href="#" onclick="{!componentId}(); return false;">Reload </a>
</apex:component>

Here is controller method:

componentInput = 'Component text';

public PageReference reloadVar(){
    componentInput = 'test 1';
    return null;
}

Now we insert three components to the page and set for each of them a unique parameter:

<apex:page>
<apex:form >
    <c:testWithId componentId="comp1"/>
    <br/>
    <c:testWithId componentId="comp2"/>
    <br/>
    <c:testWithId componentId="comp3"/>
</apex:form>
</apex:page>

The result: now each function will update a own component.