2

We have build a component that consists of a TextInput and Select Box. So that the selection can be made either via the drop down list or by typing in the value into the text field. When a selection is made the Input Box is automatically filled with the key and if the key is entered the correct item in the selection box is displayed.

<h:panelGroup rendered="#{cc.attrs.rendered}">
   <div id="#{cc.clientId}" class="abc-select #{cc.attrs.styleClass}" >
          <h:inputText id="input" disabled="#{cc.attrs.disabled}"
            value="#{cc.attrs.value}">
            <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="item"
              itemValue="#{item}" itemLabel="#{item.name}" />
            <a4j:ajax event="selectitem" render="input" oncomplete="setFocusOnInputField();" />           
          </rich:select>
    </div>        
  </h:panelGroup>

However when we pass in an <a4j:ajax event="change" ... /> with an onChange event to render a component external element. It only works when the selection is made via the drop down menu.

     <abc:myComponent id="idMC" 
      value="#{bean.value}"
      items="#{bean.itemList}"
      converter="#{itemConverter}">
      <a4j:ajax event="change" render="idA idB idC" />
     </kfn:select>

So far I figured out that it must have to do with the fact that the inputText already has an a4j element listing for change <a4j:ajax event="change" render="select" />.

When I change the ajax element in the inputText element to use <f:ajax .. /> instead it works fine.

Can someone explain why this is the case and is there a better solution?

4

0 回答 0