Re-render only a part of the panel

Question

This is a simplified version of my problem.

<h:form id="form1">
  <a4j:commandButton value="Ok" reRender="panel_1"/>

  <a4j:outputPanel id="panel_1" layout="block" style="height:100px;border:solid 1px;">
    Content here should be reRendered

    <a4j:outputPanel id="panel_2" layout="block" style="height:50px;border:solid green;color:green;">
      Content here should not be reRendered  
    </a4j:outputPanel>

  </a4j:outputPanel>
</h:form>

When user clicked the <a4j:commandButton>, the first <a4j:outputPanel> (panel_1) should be reRendered. But the content inside the second <a4j:outputPanel> should not be reRendered.
Is this possible? (At least by changing the <a4j:outputPanel> to another component.)

score 0 · Answer 1 · answered Nov 22 '12 at 10:30

0

What about wrapping the content you want to have rerendered in another panel? Like this:

<h:form id="form1">
  <a4j:commandButton value="Ok" reRender="panel_1_a"/>
  <a4j:outputPanel id="panel_1" layout="block" style="height:100px;border:solid 1px;">

    <a4j:outputPanel id="panel_1_a">
      Content here should be reRendered
    </arj:outputPanel>

    <a4j:outputPanel id="panel_2" layout="block" style="height:50px;border:solid green;color:green;">
      Content here should not be reRendered  
    </a4j:outputPanel>

Alternatively you can move panel_2 somewhere else.

answered Nov 22 '12 at 10:30

Makhiel

3,874
1
15
21

Actually in my case this is not applicable. In my case when parent is reRendered it changes its style to `display:none`. Then the child also become hidden. But since the child also is reRendered, all the data user entered inside child panel are lost. I can use `a4j:support`s in all input fields to prevent this. But I am looking for a cleaner solution. – prageeth Nov 22 '12 at 11:01
@prageeth According to how you coded your panels, it's normal that `panel_2` dissapears because your are reRendering the whole `panel_1` (including `panel_2`): if the parent component is hidden, so their children are. I think both `panel_1` and `panel_2` should be independent, I don't know any solution that fit in your code. – jmrodrigg Nov 28 '12 at 09:42

score 0 · Answer 2 · answered Nov 28 '12 at 09:59

You can improve Makhiel solution by using MyFaces, which allows you to define subforms to wrap some content for partially validations and model update.

MyFaces also allows you to attach <t:commandButton> to an specific <t:subform> via the attribute actionFor="".

You need to include tomahawk library to use its tags:

<%@ taglib prefix="t" uri="http://myfaces.apache.org/tomahawk"%>

Then Makhiel's code can be rewritten this way (I'm moving the button inside the <a4j:outputPanel> in order to put it inside the <t:subform> tag.

<h:form id="form1">
    <a4j:outputPanel id="panel_1" layout="block" style="height:100px;border:solid 1px;">
        <t:subform id="FirstPanelForm">
            <t:commandButton value="Ok" reRender="panel_1_a" actionFor="FirstPanelForm"/>
            <a4j:outputPanel id="panel_1_a">
                Content here should be reRendered
            </a4j:outputPanel>
        </t:subform>
        <a4j:outputPanel id="panel_2" layout="block" style="height:50px;border:solid green;color:green;">
            Content here should not be reRendered  
        </a4j:outputPanel>
    </a4j:outputPanel>
</h:form>

I don know if this is the behaviour you are seeking. If not, just stick with the subform idea and try to use it in your code.

Re-render only a part of the panel

2 Answers2