How to update outputPanel component from inside tabView component

Question

I'm trying to update a outputPanel component when a tabView is changed but I could not find the way. Otherway I found was to update the complete form but I would rather to update only the component.

I tried update with :frmTest:grpButtons and frmTest:grpButtons, and the only thing it worked was frmTest.

Any idea about what is wrong.

test.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="pageTitle">Test</ui:define>
    <ui:define name="content">
        <h:form id="frmTest" prependId="true">
            <div class="Container100">
                <div class="ContainerIndent">
                    <div class="Card ShadowEffect TexAlLeft">
                        <p:tabView id="tabView">
                            <p:ajax event="tabChange" listener="#{testBean.onTabChange}"
                                    update=":frmTest:grpButtons"/>
                            <p:tab title="First" id="tab1">
                                <div class="Card ShadowEffect TexAlCenter">
                                    <br/>
                                    <h2>Empty Page 1</h2>
                                    <br/>
                                    <span class="gray">Use this page to start from scratch and place your custom content.</span>
                                    <br/><br/>
                                </div>
                            </p:tab>
                            <p:tab title="Second" id="tab2">
                                <div class="Card ShadowEffect TexAlCenter">
                                    <br/>
                                    <h2>Empty Page 1</h2>
                                    <br/>
                                    <span class="gray">Use this page to start from scratch and place your custom content.</span>
                                    <br/><br/>
                                </div>
                            </p:tab>
                        </p:tabView>
                        <p:separator/>
                        <p:outputPanel id="grpButtons" rendered="#{testBean.showButtons}">
                            <p:commandButton id="btnSaveSol" value="#{msgs.save}"
                                             styleClass="Fright GreenButton"
                                             action="#{testBean.save}"
                                             ajax="true"
                                             update=":frmTest"/>
                        </p:outputPanel>
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>

TestBean.java

@ViewScoped
@ManagedBean
public class TestBean implements Serializable {

    private static final long serialVersionUID = 4078818945032342504L;

    private Arxiu arxiu;
    private boolean showButtons = true;

    @PostConstruct
    private void init() {
        loadLocale();
    }

    //----------------------------------------------------------------
    //  Methods
    //----------------------------------------------------------------        
    public void onTabChange(TabChangeEvent event) {
        showButtons = !event.getTab().getId().equals("tab2");
    }

    public void save() {
        System.out.println("save");
    }

    //Getters and setters

}

This is a simplified example, the real has more buttons. I've tried you option but it still doesn't work ¿? — Joe, Sep 18 '17 at 07:55
Possible duplicate of [Ajax update/render does not work on a component which has rendered attribute](https://stackoverflow.com/questions/14790014/ajax-update-render-does-not-work-on-a-component-which-has-rendered-attribute) — Kukeltje, Sep 18 '17 at 09:02

Joe · Answer 1 · 2017-09-18T09:59:01.273

0

I found a way that works but I still don't know why it doesn't work as I was in the question. Could it be a primefaces error?

I wrapped the outputPanel with a panel and the attribute widgetVar="var" and then update="@widgetVar(var)".

Modifications of code

<p:ajax event="tabChange" listener="#{testBean.onTabChange}"
                                    update="pnlButtons"/>
...
<p:panel id="pnlButtons">
    <p:outputPanel id="grpButtons" rendered="#{testBean.showButtons}">
        <p:commandButton id="btnSave" value="#{msgs.save}"
                         styleClass="Fright GreenButton"
                         action="#{testBean.save}" ajax="true"
                         rendered="#{testBean.showButtons}"/>
    </p:outputPanel>
</p:panel>

edited Sep 18 '17 at 09:59

answered Sep 18 '17 at 08:15

Joe

7,749
19
60
110

Just giving the `p:panel` an id and update that would have worked too... https://stackoverflow.com/questions/14790014/ajax-update-render-does-not-work-on-a-component-which-has-rendered-attribute – Kukeltje Sep 18 '17 at 09:01
@Kukeltje If I keep the outputPanel inside the panel with id it worked as you said. But if I take the outputPanel out it breaks the update. – Joe Sep 18 '17 at 09:58
Yes, see the duplicate! – Kukeltje Sep 18 '17 at 10:25
The duplicate has a nice explanation, but it was just jsf. When it comes with primefaces, it become more difficult to find bugs. With p:panel it creates a component but not with p:outputPanel, isn't that strange? – Joe Sep 18 '17 at 10:53
I have no idea what you mean by the last sentence sorry – Kukeltje Sep 18 '17 at 15:29
I mean that the example uses only jsf. In my example I use primefaces, but what I don't understand is the need of having p:panel and p:ouputPanel to work it properly. I can't find a logical explanation. – Joe Sep 18 '17 at 15:42
I don't understand what you don't understand... The duplicate is about pure jsf, yes, but the issue it refers to is generic jsf and PrimeFaces IS jsf... If the outputpanel is not rendered, you cannot make it rendered by update it (directly referencing it). You **need** a container... – Kukeltje Sep 18 '17 at 21:13
Now with your explanation I understand the use of the outer container (panel). But in my case, only with the outputPanel, shouldn't work, at least the first time, when showButtons is true and the outputPanel is rendered? And I found in the webpage with document.getElementById('frmTest:grpButtons'). Could it be because the combination of id with render affects the normal functionality? – Joe Sep 19 '17 at 08:22

How to update outputPanel component from inside tabView component

1 Answers1