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?

  • take a look at your View State and that might help you see how data is changing when you do AJAX updates Commented Nov 14, 2013 at 6:00
  • there might be only one controller for your Component though you'd think there'd be an instance per component (like an iframe would generate) Commented Nov 14, 2013 at 6:01
  • Hmm, viewstate doesn't seem to be showing anything eminating from the components... Commented Nov 14, 2013 at 6:12
  • Where is your actionFunction placed? Inside of the component? Commented Nov 14, 2013 at 7:39
  • Yes, it's placed inside the component Commented Nov 14, 2013 at 7:50

1 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" 
    <apex:actionFunction name="{!componentId}"
    <apex:outputPanel id="componentPanel">
    <a href="#" onclick="{!componentId}(); return false;">Reload </a>

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:form >
    <c:testWithId componentId="comp1"/>
    <c:testWithId componentId="comp2"/>
    <c:testWithId componentId="comp3"/>

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

enter image description here

  • Fantastic! I knew there had to be a way, but this is great! I really appreciate it! Commented Nov 14, 2013 at 17:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .