Search code examples
ajaxjsf-2faceletscomposite-component

Updating form in own composite-components in JSF

I have the following (simplified, but the issue can be demonstrated) component my:slot

<composite:interface>
</composite:interface>
<composite:implementation>
  <h:panelGroup styleClass="xxx" layout="block">
    <composite:insertChildren/>
  </h:panelGroup>
</composite:implementation>

Now I want to ad forms to use this component with two forms:

<my:slot>
    <h:form id="f3">
        <p:commandButton value="update f4" update=":f4"/>  
    </h:form>
</my:slot>
<my:slot>
  <h:form id="f4">Form f4</h:form>
</my:slot>

With this code I get the error Cannot find component with identifier ":f4" referenced from "j_idt11:f3:j_idt12". It's ok if I use the h:form id="f4" outside of my:slot. How can I use h:form in own components like shown above?

Solution

  • Composite components are by itself also naming containers like as <h:form>. Look in the generated HTML output. Their IDs are prepended to the ID of the children.

    You need to give your composite component a fixed ID so that JSF won't autogenerate an unpredictable one and then reference it in the update.

    <my:slot id="slot1">
    <h:form id="f3">
        <p:commandButton value="update f4" update=":slot2:f4"/>  
    </h:form>
</my:slot>
<my:slot id="slot2">
  <h:form id="f4">Form f4</h:form>
</my:slot>

    See also: