通过 <a4j:ajax … /> 渲染组件外部元素

Question

We have build the following composite component, however we haven't found a way to make it rerender component external elements.

 <h:panelGroup id="#{cc.attrs.id}Cmtp" rendered="#{cc.attrs.rendered}">
      <div id="#{cc.attrs.id}" class="xyz-select #{cc.attrs.styleClass}" >
        <h:inputText id="input" disabled="#{cc.attrs.disabled}"
          value="#{cc.attrs.value}"
          tabindex="#{cc.attrs.tabindex}" maxlength="#{cc.attrs.maxlength}" 
          converter="#{cc.attrs.converter}">
          <a4j:ajax event="change" render="select" />        
        </h:inputText>
        <rich:select disabled="#{cc.attrs.disabled}"
          id="select" value="#{cc.attrs.value}"
          listWidth="#{cc.attrs.listWidth}"
          converter="#{cc.attrs.converter}">          
          <f:selectItems value="#{cc.attrs.items}" var="xyz"
            itemValue="#{xyz}" itemLabel="#{xyz.name}" />
          <a4j:ajax event="selectitem" render="input" />            
        </rich:select>
        </div>        
      </h:panelGroup>

I have tried adding an attribute defining the external elements to rerender however this just comes up with an error message that the ids are not within the scope of the component.

Composite component:

<a4j:ajax event="change" render="select #{cc.attrs.render}" />  

Def:

<xyz:selct ... render="idA idB" />

I have also tried to pass an to it, by exposing the clientBehavior in the interface.

Composite component Interface:

<composite:clientBehavior name="change" event="action" /> 

Def:

<xyz:select ..>
   <a4j:ajax event="change" rerender="idA idB" />
</xyz:select>

However this just stops all the ajax functionality of the component.

After the suggestion from BalusC (thank you) I have tried the following:

<composite:interface>
...
<composite:clientBehavior name="change" event="action" targets="input select"/>  
</composite:interface>

And tried passing it the following AJAX Tag:

<a4j:ajax event="change" render="idA idB" oncomplete="alert('tada');" />

Sadly none of the specified actions are performed.

Answer 1

Relative client IDs (ie not starting with : ) are resolved relative to the current parent NamingContainer component (eg <h:form> , <h:dataTable> , <cc:implementation> , etc).

So, in case of the following line inside your composite,

<a4j:ajax event="change" render="select #{cc.attrs.render}" />  

it's been is searched relative to the <cc:implementation> . However, there's no component with ID idA nor idB inside the <cc:implementation> .

You need to specify an absolute client ID instead. Eg

<xyz:selct ... render=":formId:idA :formId:idB" />

See also:

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

---

As to the <cc:clientBahavior> fail, the context/SSCCE is missing, but I believe it's simply because you forgot execute attribute and mistyped render attribute.