By Nenad


2012-11-09 17:43:08 8 Comments

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 the component (in input.xhtml file):

<composite:interface/>
<composite:implementation>
  <div>
  #{component.children[1].setStyleClass(component.children[1].valid ? '' : 'inputError')}
    <composite:insertChildren/>
  </div>
  <h:panelGroup styleClass="optional" 
      rendered="#{!component.parent.children[1].required}" 
      layout="block" >
    #{msgs['common.optional.field']}
  </h:panelGroup>
  <h:message id="msgId" 
       for="#{component.parent.children[1].id}" errorClass="error"/>
</composite:implementation>

Again, the intended usage of the component is to wrap an h:input* element which is expected to be the first and immediate child of it in a using page.

In a using page I would then write:

    <h:form id="f1">
    <h:panelGrid border="0" columns="2" style="width: 80%">
        <f:facet name="header">
            <col width="40%" />
            <col width="60%" />
        </f:facet>
        <h:outputLabel styleClass="sectionBody" for="i1"
            value="Input 1"></h:outputLabel>
            <my:input id="ii1">
            <h:inputText id="i1" size="20" maxlength="20" tabindex="0"
            required="true" label="Input 1">
            </h:inputText>
            </my:input>
        <h:outputLabel styleClass="sectionBody" for="i2"
            value="Input 2"></h:outputLabel>
            <my:input id="ii2">
            <h:inputText id="i2" size="20" maxlength="20" tabindex="0"
                label="Input 2">
            </h:inputText>
            </my:input>
    </h:panelGrid>
    <br />
    <h:commandButton value="Submit" tabindex="1">
        <f:ajax listener="#{terminalImportBean.addTerminal}" 
          execute="@form" render="@form"/>
    </h:commandButton>
</h:form>

This would work just fine using normal posts. However if I add add f:ajax validation for "Input 1" (id="i1") and try to re-render the composite (ii1) using the following:

...   
         <h:outputLabel styleClass="sectionBody" for="i1"
            value="Input 1"></h:outputLabel>
         <my:input id="ii1">
            <h:inputText id="i1" size="20" maxlength="20" tabindex="0"
            required="true" label="Input 1">
               <f:ajax listener="#{myBean.checkInput1}" 
                  event="blur" 
                  render="ii1"/>
            </h:inputText>
         </my:input>
...

I gen an error in the browser during ajax response processing:

malformedXML: During update: f1:ii1 not found

I tried using f1:ii1, :f1:ii1, but to no avail. When I use msgId or :f1:ii1:msgId it works. Does anybody know why?

I am using Mojarra 2.1.3

Thanks

1 comments

@BalusC 2012-11-09 20:43:02

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:

Related Questions

Sponsored Content

4 Answered Questions

2 Answered Questions

[SOLVED] Render multiple components with f:ajax

0 Answered Questions

<f:ajax> not working with composite component

0 Answered Questions

How to find out ID for ajax render using two composite?

0 Answered Questions

1 Answered Questions

Primefaces composite component not rendering

3 Answered Questions

[SOLVED] Conditionally render element's attribute in a composite component

2 Answered Questions

[SOLVED] Get client ID of composite component itself for usage in JavaScript

1 Answered Questions

[SOLVED] outside f:ajax for composite component

Sponsored Content