Is it possible to rerender an outputpanel that's in the parent page from within a component?

Question

I am trying to break my page into multiple components so it can be reused on several pages. The component is essentially a form and after submission, would like the parent page to rerender a certain outputpanel block. This is the code I used to use:

<apex:actionFunction name="reRenderNewFeedPanel" action="{!afterSaveAttachment}" reRender="NewFeedPanel, FeedListPanel" />

but from within the component, the reRender on "FeedListPanel" doesn't seem to work, because it's not refreshing.

Answer 1

Yes you can rerender an element on the parent from the component. The component just gets merged into the DOM of the parent.

NOTE What you cannot do is update values of the parent controller from the component unless you pass in those vales (i.e. sObject, record, wrapper, etc) as an attribute to the component

To illustrate:

VF Page (Parent)

<apex:page>


<script>
    var x = 0;
</script>

<c:mytestcomponent/>

<apex:outputPanel layout="block" id="parentDiv">
    <script>
        x += 1;
        alert('The value of x is now: ' + x);
    </script>
</apex:outputPanel>


</apex:page>

Component

<apex:component >


    <apex:form >
        <apex:commandButton value="Click Me" rerender="parentDiv"/>
    </apex:form>

</apex:component>

On load you get an alert of '1'. On each click of the button in the component the value of x increments due to the rerender.

If you think something else is happening then change the name of the rerender attribute to something that does not exist and you will see that you get no alert. Thus it is the rerender that is working here

Answer 2

Yes, but not directly. It requires some JavaScript an an extra round-trip to the server. This requires the parent's cooperation.

<!-- parent page -->
<apex:actionFunction name="refreshPage" reRender="NewFeedPanel, FeedListPanel" />

 <!-- component -->
 <apex:actionFunction name="reRenderNewFeedPanel" action="{!afterSafeAttachment}" onComplete="refreshPage()" />