rendered not working in Primefaces5+JSF2

Question

Here my XHTML code

<p:selectOneRadio id="selectone"
                    value="#{tweetDistributionManagedBean.tweetType}">
                    <f:selectItem itemLabel="Group Tweets" itemValue="GT" />
                    <f:selectItem itemLabel="Event Tweets" itemValue="ET" />
                    <f:selectItem itemLabel="Suprachar Tweets" itemValue="ST" />
                    <p:ajax event="click"
                        listener="#{tweetDistributionManagedBean.renderUploadPanel}"
                        update="gtid" process="@form" />
                </p:selectOneRadio>

and Java method i am calling

public void renderUploadPanel(AjaxBehaviorEvent event) {
       // String selecteValues = (String) event. ;
        visibleGTFlag = true;
        System.out.println("Method called----------->"+visibleGTFlag);
    }

And i want to rendred this panel when a checkbox is clicked

<p:panel id="gtid"
                rendered="#{tweetDistributionManagedBean.visibleGTFlag}"
                toggleable="true">
                <p:fileUpload
                    fileUploadListener="#{tweetDistributionManagedBean.handleFileUpload}"
                    mode="advanced" multiple="true" update="messages" auto="true"
                    sizeLimit="1048576" allowTypes="/(\.|\/)(doc|docx|xls|xlsx|pdf)$/" />
            </p:panel>

But when i am refreshing this page then this panel rendering what i am doing wrong?

Answer 1

The problem is that when a component has rendered="false" it won't be added in the view tree component, so it cannot be referenced nor updated by any component in the current view. This explains why this update fails when you try to update the component by an ajax request, because you're still in the same view, while when you fire a complete request on the page you can see the component, because it is a new view.

The solution for these problems is to wrap the non-rendered component inside a UIContainer and update the wrapper component instead. You may use <h:panelGroup layout="block"> that will render as a HTML div:

<p:selectOneRadio id="selectone"
    value="#{tweetDistributionManagedBean.tweetType}">
    <f:selectItem itemLabel="Group Tweets" itemValue="GT" />
    <f:selectItem itemLabel="Event Tweets" itemValue="ET" />
    <f:selectItem itemLabel="Suprachar Tweets" itemValue="ST" />
    <p:ajax event="click"
        listener="#{tweetDistributionManagedBean.renderUploadPanel}"
        update="gtidWrapper" process="@form" />
</p:selectOneRadio>

<!-- rest of Facelets code... -->

<h:panelGrid id="gtidWrapper" layout="block">
    <p:panel id="gtid"
        rendered="#{tweetDistributionManagedBean.visibleGTFlag}"
        toggleable="true">
        <p:fileUpload
            fileUploadListener="#{tweetDistributionManagedBean.handleFileUpload}"
            mode="advanced" multiple="true" update="messages" auto="true"
            sizeLimit="1048576" allowTypes="/(\.|\/)(doc|docx|xls|xlsx|pdf)$/" />
    </p:panel>
</h:panelGrid>