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;
            }
        }
    }

}

score 5 · Accepted Answer · edited May 23 '17 at 12:12

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>

PrimeFaces SelectOneMenu ajax rendering

1 Answers1

See also:

Linked