PanelGroup is not getting rendered after clicking the command button action

Question

I have a 2 set of panel groups . one panel group contains a fieldset and inside, two radio buttons and one command button .Based on the selection of radio button, respected value will be displayed in another panel group through ajax call. But issue is after the radio button selection when the command button is clicked the other panel group is not at all rendered when the first time page loads . when i refresh everything works fine. I could not able to figure out why the renderedPanelGroup value is not set to true even that is being set in the command action .Here is my code.

test.xhtml

    <h:form id="parentformid">
 <h:panelGroup id="demandDashBoardPanelGroupID">
    <fieldset> 
    <legend>Demand Dashboard</legend>

     <table>
        <tr>
        <td> 
            <h:selectOneRadio id="groupbyid" value="#{demandManagedBean.selectedRadioButton}" >  
                    <f:selectItem itemLabel="Group By Creation Date Time" itemValue="1" />  
                    <f:selectItem itemLabel="Group By Location" itemValue="2" />
            </h:selectOneRadio>
        </td>
        <td>
            <h:commandButton id="fetchbuttonID" value="Fetch" 
                     action="#{demandManagedBean.displayDemandRequestsTable}">
                          <f:ajax render=":parentformid:demandrequestpanelgrpid"execute="@form" /> 
            </h:commandButton>
        </td>
        </tr>
        </table>

     </fieldset>

     </h:panelGroup>
   //For checking demandManagedBean.renderedPanelGroup value. it is giving always false.Thats why panel group is not getting rendered.
   <h:outputText value="#{demandManagedBean.renderedPanelGroup}" />

    <h:panelGroup id="demandrequestpanelgrpid" rendered="#{demandManagedBean.renderedPanelGroup}"> 

     <fieldset id="demandrequestfieldsetid"> 

     <legend >Demand Requests</legend>

            <h:outputText rendered="#{demandManagedBean.renderFirstTable}" value="first table"/>

            <h:outputText rendered="#{demandManagedBean.renderSecondTable}" value="second table"/>

     </fieldset> 

   </h:panelGroup>

//Backing bean cmd action

private String selectedRadioButton ="1";
private boolean renderFirstTable ;
private boolean renderSecondTable;
private boolean renderedPanelGroup ;

//getter and setter methods

public void displayDemandRequestsTable(){


        if(selectedRadioButton!= null && selectedRadioButton.endsWith("1")){

            renderFirstTable = true;
            renderSecondTable= false;

        }else if(selectedRadioButton!= null && selectedRadioButton.endsWith("2")){

            renderFirstTable = false;
            renderSecondTable= true;

        }
        renderedPanelGroup = true;
    }

Answer 1

You cannot update elements which are not rendered , rendered=false "is a JSF way to" to remove elements from the DOM Tree ,

its not like css display:none or visibility:hidden <- this two will keep the elements in the DOM tree but hidden , while the JSF rendered=false wont even render (keep) the element in the DOM tree (you wont even see it in the "view source" of the page)

So in you case you need to wrap the panelGroup with another `panelGroup' and update the id of the wrapper

<h:panelGroup id="demandrequestpanelgrpid">
    <h:panelGroup rendered="#{demandManagedBean.renderedPanelGroup}"> 

. . .

also look at similar question

Can you update an h:outputLabel from a p:ajax listener?