Referring composite component ID in f:ajax render

Question

I am writing a composite component that is intended to wrap an input element, and augment it with an \'optional field\' designation and h:message element below it. Here is

Answer 1

That's because the composite component does by itself not render anything to the HTML. Only its children are been rendered to HTML. There does not exist any HTML element with ID f1:i11 in the generated HTML output. Open the page in browser, rightclick and View Source. Look in there yourself. There's no such element with that ID. JavaScript/Ajax is encountering exactly the same problem. It can't find the element in order to update it.

To solve this, you'd need to wrap the entire composite body in a HTML <div> or <span> and assign it an ID of #{cc.clientId} which basically prints UIComponent#getClientId().

<cc:implementation>
    <div id="#{cc.clientId}">
        ...
    </div>
</cc:implementation>

Then you can reference it as below:

<my:input id="foo" />
...
<f:ajax ... render="foo" />

You can even reference a specific composite component child.

<f:ajax ... render="foo:inputId" />

See also:

• Is it possible to update non-JSF components (plain HTML) with JSF ajax?
• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"