h:panelGroup not rendered when change the value of h:selectOneMenu using AJAX

Question

I have a grid group that should be rendered when change the value of the selectOneMenu. I have attached a valueChangeListener to the selectOneMenu and it access succefully the function assigned to it , but the html component does not rerender. the strange thing that the flag the determines the rendering is called anyway.

<h:selectOneMenu value="#{channelsAdmin.profileID}" id="profileDrp" valueChangeListener="#{channelsAdmin.setProfileInit}">
    <f:selectItems value="#{channelsAdmin.profiles}" var="Profile"
         itemLabel="#{Profile.profileName}"
        itemValue="#{Profile.profileId}" />
    <f:ajax execute="@this" immediate="true" render="pnl"></f:ajax>
</h:selectOneMenu> 
<h:panelGroup id="pnl" rendered="#{channelsAdmin.ccpAuthPanelFlage}">
    <h:inputText id="sest" value="hew">
    </h:inputText>
</h:panelGroup>

Bean:

public void setProfileInit(ValueChangeEvent e) {
    ccpAuthPanelFlage=true;
    ccpPurchPanelFlage=true;
}

score 3 · Accepted Answer · edited May 23 '17 at 11:51

The <f:ajax render="pnl"> works roughly as follows:

When the ajax response is arrived, obtain the update element with id="pnl" from XML response.
Now obtain the element with id="pnl" from HTML document by document.getElementById().
Replace its contents with the update element from XML response.

In your particular case, step 2 failed because there's no such element in the HTML document. It doesn't exist in the HTML document because it's never been rendered in first place.

You need to make sure that <f:ajax render="..."> refers an element which is always rendered so that JavaScript can find it by document.getElementById() in order to replace its contents.

<h:selectOneMenu value="#{channelsAdmin.profileID}" id="profileDrp" valueChangeListener="#{channelsAdmin.setProfileInit}">
    <f:selectItems value="#{channelsAdmin.profiles}" var="Profile"
         itemLabel="#{Profile.profileName}"
        itemValue="#{Profile.profileId}" />
    <f:ajax execute="@this" immediate="true" render="pnl"></f:ajax>
</h:selectOneMenu>
<h:panelGroup id="pnl">
    <h:panelGroup rendered="#{channelsAdmin.ccpAuthPanelFlage}">
        <h:inputText id="sest" value="hew">
        </h:inputText>
    </h:panelGroup>
</h:panelGroup>

h:panelGroup not rendered when change the value of h:selectOneMenu using AJAX

1 Answers1

See also: