PrimeFaces SelectOneMenu ajax rendering

Question

What was wrong in my program? I think everything is fine. My changeKeyValue method get the selected value 'REFERENCE' and set true boolean value into showReference. But, my page cannot render h:panelGroup if I use update="targetPanel" in p:ajax. It can render h:panelGroup when I use update="entryForm".

What I am missing?

mypage.xhtml

<h:form id="entryForm">
        <p:selectOneMenu value="#{MyBean.keyFactorValue}" required="true" style="width:257px;" id="keyFactorValue">
            <f:selectItems value="#{MyBean.selectItemList}" var="type" itemLabel="#{type.label}" itemValue="#{type}"/>  
            <p:ajax listener="#{MyBean.changeKeyValue}" update="targetPanel" event="change"/>
        </p:selectOneMenu>

        <h:panelGroup id="targetPanel" rendered="#{MyBean.showReference}">
            .......
        </h:panelGroup>

</h:form>

KeyFactorValue.java

public enum KeyFactorValue {
    REFERENCE("Reference"), FORM_TO("From-To"), FIXED("Fixed");

    private String label;

    private KeyFactorValue(String label) {
        this.label = label;
    }

    public String getLabel() {
        return label;
    }
}

MyBean.java

@Scope(ScopeType.CONVERSATION)
@Name("MyBean")
public class MyBean {
    private boolean showReference;

    public boolean isShowReference() {
        return showReference;
    }

    public KeyFactorValue[] getSelectItemList() {
        return KeyFactorValue.values();
    }

    public void changeKeyValue(AjaxBehaviorEvent e) {
        KeyFactorValue type = keyFactor.getKeyFactorValue();
        System.out.println("Selected KeyFactorValue : " + type);
        switch(type) {
            case REFERENCE :{
                showReference = true;
                break;
            }
            default :{
                showReference = false;
                break;
            }
        }
    }

}

Answer 1

You can't ajax-update an element in HTML which isn't rendered by JSF. JavaScript (the code behind ajax) wouldn't be able to find it by document.getElementById() in order to replace its content.

You can only ajax-update an element in HTML which is always rendered by JSF. Wrap the conditionally rendered component in another component which is always rendered and ajax-update it instead.

<h:panelGroup id="targetPanel">
    <h:panelGroup rendered="#{MyBean.showReference}">
        ...
    </h:panelGroup>
</h:panelGroup>

See also:

• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?