f:ajax render form component

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.

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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)

Please recreate and test the problem locally if you can't tell from top of head for sure. – BalusC Sep 19 '13 at 13:01
@BalusC ok Mr. BalusC – vijaya kumar Sep 20 '13 at 01:02
@BalusC can u please refer this question and give the solution http://stackoverflow.com/questions/18907770/when-to-use-colon-in-rendering-in-jsf-components – vijaya kumar Sep 20 '13 at 02:01

f:ajax render form component

2 Answers2

See also: