How to hide a h:panelGrid

问题

I have a <p:selectOneRadio> with two <f:selectItem> and I have two <h:panelGrid>. I want to hide one of the <h:panelGrid> depending of the <f:selectItem> selected.

<p:selectOneRadio>
    <f:selectItem itemLabel="Hide pnl1" itemValue="1" />
    <f:selectItem itemLabel="Hide pnl2" itemValue="2" />
</p:selectOneRadio>

<h:panelGrid id="pnl1">
    //More stuff here...
</h:panelGrid>

<h:panelGrid id="pnl2">
    //More stuff here...
</h:panelGrid>

In this example how can i hide pnl1 if the option 1 is selected in the radio?

How can i hide pnl2 if the option 2 is selected in the radio?

Please show me the Bean code needed too.

Only one pnl should be showed

回答1:

You can do it through ajax.

<h:form id="frmPanels">
    <p:selectOneRadio id="sorPanelShow" binding="#{sorPanelShow}">
        <f:selectItem itemLabel="Hide pnl1" itemValue="1" />
        <f:selectItem itemLabel="Hide pnl2" itemValue="2" />
        <p:ajax update="pnlContainer" />
    </p:selectOneRadio>

    <h:panelGroup id="pnlContainer" layout="block">
        <h:panelGrid id="pnl1" rendered="#{sorPanelShow.value eq '2'}">
            //More stuff here...
        </h:panelGrid>

        <h:panelGrid id="pnl2" rendered="#{sorPanelShow.value eq '1'}">
            //More stuff here...
        </h:panelGrid>
    </h:panelGroup>
</h:form>

Note that you have to use a <h:panelGroup> to wrap the <h:panelGrid> to re-render. This is because each non-rendered UIComponent (rendered="false") won't be part of the tree component stored in the view and won't be able to be updated by ajax operations. So, instead rendering each <h:panelGrid> on their own, it is better to update the wrapper UIComponent. Also, <h:panelGroup layout="block"> will use a <div> when generating the HTML.

Associated info:

What is component binding in JSF? When it is preferred to be used?
<h:panelGroup>

来源：https://stackoverflow.com/questions/23999818/how-to-hide-a-hpanelgrid

标签

java

jsf

primefaces

hide