f：ajax渲染表单组件

Question

I want to render a single component (h:selectManyCheckbox) inside a form based on a check-box that I select or not.

<h:form> 
    <h:selectBooleanCheckbox value="#{bean.var}">
        <f:ajax event="click" render="employeeCheckboxes" />
    </h:selectBooleanCheckbox>

    <h:selectManyCheckbox 
        id="employeeCheckboxes"
        value="#{bean.checkboxes}"
        rendered="#{var}">
    </h:selectManyCheckbox>
</h:form>

However, the component isn't re-rendered on selecting or deselecting the check-box. I can however re-render the whole form but I don't want that.

Answer 1

You can't reference a component in <f:ajax render> which is in first place never rendered in HTML output. The <f:ajax render> uses under the covers JavaScript document.getElementById() to find the HTML element in order to update it with the new HTML structure from the ajax response. However, if a JSF component is in first place never rendered in HTML output, then JavaScript can't find it anywhere either.

You need to wrap it in another component which is always rendered.

<h:form> 
    <h:selectBooleanCheckbox value="#{bean.var}">
        <f:ajax render="employeeCheckboxesGroup" />
    </h:selectBooleanCheckbox>

    <h:panelGroup id="employeeCheckboxesGroup">
        <h:selectManyCheckbox 
            id="employeeCheckboxes"
            value="#{bean.checkboxes}"
            rendered="#{bean.var}">
        </h:selectManyCheckbox>
    </h:panelGroup>
</h:form>

(note that I removed event="click" as it's the default already)

See also:

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

Answer 2

Hi i think you missed managed bean name in

rendered attribute

of checkbox tag.