<f:ajax> Unable to attach <f:ajax> to non-ClientBehaviorHolder parent

Question

I receive the following error when running my application:

<f:ajax> Unable to attach <f:ajax> to non-ClientBehaviorHolder parent

My JSF:

    <h:commandButton id="submitschool" action="submit" value="Get templates" style="FONT-SIZE: medium;FONT-FAMILY: 'Rockwell';width : 128px; height : 24px;">
    <ui:repeat value="#{person.theImage}" var="item">
    <f:ajax event="change" render="image" />
    <h:graphicImage id="image" value="#{item}"/>
    </ui:repeat>
    </h:commandButton>

I'm trying to return back elements in an array to the view, where "theImage" is an array in person class.

Answer 1

The <f:ajax> tag can only be directly nested in an UIComponent which implements the ClientBehaviorHolder interface. The <ui:repeat> isn't one of them.

Click the javadoc link, it tells the following:

All Known Implementing Classes:

HtmlBody, HtmlCommandButton, HtmlCommandLink, HtmlDataTable, HtmlForm, HtmlGraphicImage, HtmlInputSecret, HtmlInputText, HtmlInputTextarea, HtmlOutcomeTargetButton, HtmlOutcomeTargetLink, HtmlOutputLabel, HtmlOutputLink, HtmlPanelGrid, HtmlSelectBooleanCheckbox, HtmlSelectManyCheckbox, HtmlSelectManyListbox, HtmlSelectManyMenu, HtmlSelectOneListbox, HtmlSelectOneMenu, HtmlSelectOneRadio

It's not clear from your question what your intent is, so I can't give a more specific answer than recommending to get rid of the <f:ajax> in this context. It doesn't belong there. Maybe you meant to put it directly inside the <h:commandButton> (which is of type HtmlCommandButton), but then you need to change the change event since it wouldn't make sense on a <input type="submit"> generated by the <h:commandButton>.

I think you would also like to move the <ui:repeat> out of the <h:commandButton> since that does also not make much sense. Put it next to the <h:commandButton> instead of nesting inside it.