JavaScript for ADF Faces 1.1 within a loop

Question

I am having issue with my js function within a ADF Faces af:interator. I have 3 controls within an af:iterator (af:ouputText, af:inputText, af:selectBooleanCheckBox) and I would like to have a js function on the checkbox so that when checking the checkbox, the text of the outputText will be copied into the inputText.

The issue here is that within the af:iterator, ADF will generate its own id or append a weird number for the ids and I am not sure if I should rely on those generated ids to write my js function. I know that I should be using PPR for this, but I can't.

Answer 1

You can use a combination of <af:clientAttribute/> and <af:clientListener/> and some javascript to achieve this behavior.

You will also need to set clientComponent to true on the <af:inputText/>.

This works in my test program.

<af:document id="d1">
  <af:resource type="javascript">
    function copyFromTo(evt) {
        fromValue = evt.getSource().getProperty('fromValue');
        fromIndex = evt.getSource().getProperty('fromIndex');
        // iterator ID, then fromIndex, then inputText ID 
        id = 'i1:'+fromIndex+':it1'; 
        inputComponent = AdfPage.PAGE.findComponentByAbsoluteId(id);
        inputComponent.setValue(fromValue);
    }
  </af:resource>
  <af:form id="f1">
    <af:panelStretchLayout id="psl1">
      <f:facet name="center">
        <af:iterator id="i1" value="#{PageBean.outputTextValues}" var="row" varStatus="rowStatus">
          <af:panelGroupLayout id="pgl1" layout="horizontal">
            <af:selectBooleanCheckbox label="Copy" id="sbc1">
              <af:clientAttribute name="fromValue" value="#{row}"/>
              <af:clientAttribute name="fromIndex" value="#{rowStatus.index}"/>
              <af:clientListener method="copyFromTo" type="click"/>
            </af:selectBooleanCheckbox>
            <af:spacer width="10" height="10" id="s1"/>
            <af:outputText value="#{row}" id="ot1"/>
            <af:spacer width="10" height="10" id="s2"/>
            <af:inputText label="Label 1" id="it1" value="none" clientComponent="true"/>
          </af:panelGroupLayout>
        </af:iterator>
        <!-- id="af_one_column_stretched"   -->
      </f:facet>
    </af:panelStretchLayout>
  </af:form>
</af:document>