Question

I use a composite component in a form, and I want to use an ajax call to, when the composite component value is changed, the value of the model for a related field to be reset and the corresponding component to be rendered again (empty). But it seems that I can only set the rendering for the component; not for another one; I keep getting an <f:ajax> contains an unknown id 'ticketForm:gfhId'.

I have a compositecomponent loc:Location (simplified)

<!DOCTYPE...
<html...
<h:body>
  <composite:interface>
    <composite:attribute name="visibleFieldValue" required="true" />
    <composite:attribute name="hiddenFieldValue" required="true" />
    <composite:clientBehavior name="changeLocation" event="click" targets="updateButton deleteButton"/>
  </composite:interface>
  <composite:implementation>
    <div id="#{cc.clientId}">
      <h:inputText id="visibleId" value="#{cc.attrs.visibleFieldValue}"
        readonly="true" onfocus="#{rich:component('popUpPnl')}.show('', {top:'100px', left:'250px'});"/>
      <h:inputHidden id="hiddenId" value="#{cc.attrs.hiddenFieldValue}"
        converter="es.caib.gesma.gesman.data.converter.LocationConverter" />
      <a4j:commandButton id="deleteButton"
        image="/resources/images/icons/textfield_delete.png" alt="Borrar"/>
      <h:commandButton id="updateButton" value="Update"/>

      ...
    </composite:implementation>
  </body>
</html>

The component is used inside form ticketForm as follows:

<loc:location id="locationId"
  hiddenFieldValue="#{ticketCtrl.ticket.location}"
  visibleFieldValue="#{ticketCtrl.ticket.locationDescription}">
  <f:ajax event="changeLocation" render="ticketForm:gfhId" execute="@this"
    listener="#{ticketCtrl.locationListener}"/>
</loc:location>

Setting render to @all or @form causes the exception to not be shown, but the gfhId component is not rendered (I think it is applying it only to the composite component).

For comparing, I have setup the desired behavior with an inputText component in the same form:

<h:inputText id="contactId" value="#{ticketCtrl.ticket.contactPerson}">
  <a4j:ajax event="change" render=":ticketForm:gfhId"
    execute="@this" listener="#{ticketCtrl.locationListener}"/>
</h:inputText>

Any ideas? Thanks in advance.

Answer 1

All relative client IDs (i.e. those not starting with :) in execute and render of <f:ajax> are resolved relative to the parent NamingContainer component. The composite component is implicitly a NamingContainer. So it’s basically looking for ticketForm:gfhId inside the context of the <cc:implementation>, but there’s none.

Use an absolute client ID instead.

<f:ajax ... render=":ticketForm:gfhId" />

See also:

• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"