渲染的JSF不起作用

Question

I have something like this on my webpage, a select/drop down menu. This drop down menu should generate another drop down menu based on selected item. The way I am doing it, is by calling <f:ajax event="change"..listener=..>

But it is not happening as I expected. While selecting item in the dropdown menu trigger the listener in the ajax tag, the rendered property of the following drop down tables seems not affected by the changes. And the value for rendered changed successfully from false to true. Which..made me wonder what is wrong in my jsf page.

Here is the xhtml '

                        <h:selectOneMenu value="#{teacher.viewCategory}">
                            <f:selectItem itemValue="0" itemLabel="Tahun" />
                            <f:selectItem itemValue="1" itemLabel="Mata Pelajaran" />
                            <f:ajax event="change" render="divYearSelection divCourseSelection"
                                    listener="#{teacher.enableViewCategory}"/>
                        </h:selectOneMenu>

                        <h:panelGroup id="divYearSelection" layout="block" rendered="#{teacher.showViewYearSelection}">
                            <h:outputText value="YEAR"/>
                        </h:panelGroup>

                        <h:panelGroup id="divCourseSelection" layout="block" rendered="#{teacher.showViewCourseSelection}">
                            <h:outputText value="COURSE"/>
                        </h:panelGroup>


                        <h:commandButton value="#{msg.tcr_form_submit_view}" action="#{teacher.viewTeacher}"/>
                    </h:panelGrid>
                </h:form>' 

and this is the bean's function supporting the ajax

public void enableViewCategory(AjaxBehaviorEvent e) {       
        if (this.getViewCategory().equals("0")) {
            this.setShowViewYearSelection(true);
        } else {
            this.setShowViewCourseSelection(true);
        }
    } 

When I debugged , the function works fine.

Answer 1

If partial rendering doesn't work a good starting point is to look into html source of your page as it is rendered in browser. Your render="divYearSelection" will only work if both (the ajax triggering component and the target component) have the same direct parent container.

Ids of rendered html components usually look like id="formId:componentId:nestedComponentId1" or id="formId:componentId:nestedComponentId2"

So a render="nestedComponentId2" called from component1 will only work if both ids have the same "trailer".

You could try to use the complete id as given in the example starting with the id of the form or alternatively (if the whole form is not too big) use render="@form" which updates the whole form.