How to render one panel and stop rendering another panel using selectOneMenu in jsf

Question

I Have following code:

<h:panelGroup rendered="#{UserAccessHandler.isAitfCompany}">
    <!-- For the dropdown sensorlist -->
    <h:outputLabel value="#{labelBundle.device}"
        style="font-weight:bold; padding-right:15px;" />
    <h:selectOneMenu id="testing"
        value="#{SystemHealthPageModel.selectedSensorId}"
        styleClass="facility_dropDown_list">
        <f:selectItem itemValue="----" /> 
        <f:selectItems
            value="#{SystemHealthPageModel.childFacilitySelectionList}" />
        <a4j:ajax event="valueChange" execute="@this"
            render="systemHealthAlert" />
    </h:selectOneMenu>


</h:panelGroup>

<rich:panel id="allSystemHealthAlert">
<alert:system_health_alert alertList="#{SystemHealthPageModel.allSystemAlerts}"
                numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
                displayAssetRelatedData="true"
                moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
</rich:panel>

<rich:panel id="systemHealthAlert">
<alert:system_health_alert alertList="#{SystemHealthPageModel.systemAlerts}"
                numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
                displayAssetRelatedData="true"
                moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
</rich:panel>

Actually I have two panels. When I will render "systemHealthAlert" panel using selectOneMenu at that time I want to stop render other panel named as "allsystemHealthAlert". For you information "allsystemHealthAlert" is automatically loaded during initial page load. I dont want to render this panel when I will render "systemHealthAlert" panel using selectOneMenu. Is there any way to do that.

Thanks

Please give the full code so its easy to understand. – BholaVishwakarma Mar 06 '14 at 12:52 — BholaVishwakarma, Mar 06 '14 at 12:52
Code edited. Full code is there. @Bhola. – Novis Mar 06 '14 at 12:56 — Novis, Mar 06 '14 at 12:56

score 2 · Accepted Answer · answered Mar 06 '14 at 14:03

Wrap your panels in a wider container and point it from your <h:selectOneMenu /> instead. Then, perform a conditional rendering of <rich:panel /> elements depending on #{SystemHealthPageModel.selectedSensorId} value.

<h:selectOneMenu id="testing"
    value="#{SystemHealthPageModel.selectedSensorId}">
    <f:selectItem itemValue="----" /> 
    <f:selectItems
        value="#{SystemHealthPageModel.childFacilitySelectionList}" />
    <a4j:ajax event="valueChange" execute="@this"
        render="grouperPanel" />
</h:selectOneMenu>

<h:panelGroup id="grouperPanel">
    <rich:panel id="allSystemHealthAlert" rendered="#{empty SystemHealthPageModel.selectedSensorId}">
        <alert:system_health_alert alertList="#{SystemHealthPageModel.allSystemAlerts}"
            numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
            displayAssetRelatedData="true"
            moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
    </rich:panel>

    <rich:panel id="systemHealthAlert" rendered="#{not empty SystemHealthPageModel.selectedSensorId}">
        <alert:system_health_alert alertList="#{SystemHealthPageModel.systemAlerts}"
            numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
            displayAssetRelatedData="true"
            moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
    </rich:panel> 
</h:panelGroup>

score 0 · Answer 2 · edited May 23 '17 at 12:03

We will achieve this using a listener method then rerendering the components.

(1) Code

Your xhtml page :

<h:panelGroup id="panels">
    <rich:panel rendered="#{managedBean.showAllSystem}">
        <h:outputText value="ONEONE" />
    </rich:panel>
    <rich:panel rendered="#{not managedBean.showAllSystem}">
        <h:outputText value="TWOTWO" />
    </rich:panel>
</h:panelGroup>

And

<a4j:ajax listener="#{managedBean.menuValueChanged}" render="panels" />

Your managed bean :

int selectedSensorId;
boolean showAllSystem;

// getters and setters

public void menuValueChanged() {
    // business logic    
    // for example
    if(selectedSensorId == 0) {
        showAllSystem = true;
    } else {
        showAllSystem = false;
    }
}

(2) Workflow

1- First, in order to update a component using AJAX, you should be able to call it by its client id. in case the component is sometimes not rendered, it will be getting a generated client id that you won't be knowing beforehand. One solution is to encapsulate the to-be-rendered components with an always rendered component (Better explained here)

2- in your managed bean you will create a toggle flag, let's call it showAllSystem, if it is true it will show allSystemHealthAlert and hide systemHealthAlert. this flag will be used by the panels' rendered attributes.

3- you will then create the listener method, let's call it menuValueChanged() that will set the showAllSystem flag depending on the selectedSensorId and will be called by the listener in your a4j:ajax tag

1) Your listener definition is missing the `()`, they're not optional with your method definition. 2) You need to re-render a id that exists on the page (see @XtremeBiker's approach), or JSF won't find the target to re-render when the response comes back. — mabi, Mar 06 '14 at 18:28
number (1) is totally incorrect, in EL we can call a method without parentheses if we're not passing parameters to it http://docs.oracle.com/javaee/7/tutorial/doc/jsf-el003.htm#BNAHZ and i will punish myself for number (2) by writing 100 times : `encapsulate the to-be-rendered-using-ajax component with an ALWAYS rendered component` .. i'll edit my answer. Cheers ! — Rami, Mar 07 '14 at 04:08
Have you tried (1)? If it works, tell me. What I understood is that leaving the parens off is only allowed if the expected method signature takes no parameters. The `listener` methods [take](http://docs.oracle.com/javaee/7/javaserverfaces/2.2/vdldocs/facelets/f/ajax.html) an `AjaxBehaviorEvent`. — mabi, Mar 07 '14 at 07:59
Yes, and it works. Actually when you don't specify an event, it takes the `UIComponent`'s default event (e.g. onchange for inputText and valuechange for selectOneMenu) — Rami, Mar 07 '14 at 09:06

How to render one panel and stop rendering another panel using selectOneMenu in jsf

2 Answers2