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 – Scott Pelak Nov 14 '13 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) – Scott Pelak Nov 14 '13 at 6:01
  • Hmm, viewstate doesn't seem to be showing anything eminating from the components... – Nathan Williams Nov 14 '13 at 6:12
  • Where is your actionFunction placed? Inside of the component? – Sergej Utko Nov 14 '13 at 7:39
  • Yes, it's placed inside the component – Nathan Williams Nov 14 '13 at 7:50

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! – Nathan Williams Nov 14 '13 at 17:28

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.