1
votes

I want to use a ui:repeat or any other iterative tag to display a number of components once for each item in an Array list.

<!-- print multiple mandates -->
        <ui:repeat id="mandates" var="mandate" value="#{taxheadDirectDebit.mandates}">




        <a4j:region id="remittanceDetailsSection"
            rendered="#{(taxheadDirectDebit.accountFinancialInfo.registration.type != 'PREM') or (taxheadDirectDebit.accountFinancialInfo.registration.type != 'VAT')}">


            <!-- Remittance Details -->
            <fieldset><legend class="sub"> <h:outputText
                value="#{msg['remittanceDetails.title']}" /> </legend> 

            <!-- Estimated Liability -->
            <div class="field">
            <div class="label"><label for="allocatedAmount"><h:outputText
                for="estimatedLiability"
                value="#{msg['remittanceDetails.estimatedLiability']}" /> </label><span
                class="requiredFlag">*</span></div>
            <div class="error">
                <rich:message styleClass="errorText" for="estimatedLiability" />
            </div>
            <div class="input">
                <h:inputText id="estimatedLiability" size="30"
                maxlength="11" label="#{msg['registerContractPage1.subTaxNumber']}"
                value="#{taxheadDirectDebit.estimatedLiability}">
                <a4j:ajax event="change" render="remittanceFrequency" />
                </h:inputText>
            </div>

            <br class="clear" />

            </div>

            <!-- Is Seasonal -->
            <div class="field">
            <div class="label"><label for="isSeasonal"> <h:outputText
                for="isSeasonal"
                value="#{msg['remittanceDetails.isTheNatureSeasonal']}" /> </label><span
                class="requiredFlag">*</span></div>
            <div class="error"><rich:message styleClass="errorText"
                for="isSeasonal" /></div>
            <div class="input"><h:selectOneRadio id="isSeasonal"
                label="#{msg['remittanceDetails.isTheNatureSeasonal']}"
                value="#{taxheadDirectDebit.isSeasonal}"
                styleClass="radioLabelTop">
                <ddo:twoOptionSelection />
            <a4j:ajax event="click" render="remittanceFrequency" />
            </h:selectOneRadio></div>

            <br class="clear" />

            </div>

            </fieldset>

        </a4j:region> 

        <!-- Remittance Frequency -->
        <a4j:outputPanel id="remittanceFrequency">

        <div class="field">
            <div class="label"><label for="allocatedAmount"><h:outputText
                for="estimatedLiability"
                value="#{msg['remittanceDetails.estimatedLiability']}" /> </label><span
                class="requiredFlag">*</span></div>
            <div class="error">
                <rich:message styleClass="errorText" for="estimatedLiability" />
            </div>
            <div class="input">
                <h:inputText id="estimatedLiability" size="30"
                maxlength="11" label="#{msg['registerContractPage1.subTaxNumber']}"
                value="#{taxheadDirectDebit.estimatedLiability}">
                <a4j:ajax event="change" render=":remittanceDetails:mandates:remittanceFrequency" />
                </h:inputText>
            </div>

            <br class="clear" />

            </div>

            <fieldset><legend class="sub"> <h:outputText
                value="#{msg['remittanceDetails.frequency']}" /> </legend> 

            <!-- Amount to be Debited -->
            <div class="field">
            <div class="label"><label for="amountEachMonth"><h:outputText
                for="amountEachMonth"
                value="#{msg['remittanceDetails.amountToBeDebited']}" /> </label></div>
            <div class="error"><rich:message styleClass="errorText"
                for="amountEachMonth" /></div>
            <div class="input"><h:inputText id="amountEachMonth" size="30" readOnly="true" 
                maxlength="8" label="#{msg['remittanceDetails.amountToBeDebited']}"
                value="#{mandate.remittanceDetails.amountEachMonth}">
                <a4j:ajax event="change" render="remittanceFrequencyNoDebitedEachMonth"/>
            </h:inputText></div>
            <br class="clear" />
            </div>

            <a4j:outputPanel id="remittanceFrequencyNoDebitedEachMonth">
            <!-- Months -->
            <div class="field">
                <div class="grid1"><h:outputText
                    value="&#160;" />&#160;
                </div>
                <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
                    <div class="grid2"><div align="center">
                        <h:outputText value="#{msg['reviewDetails.reduce']}"/><div align="center"></div>
                    </div></div>
                </rich:panel>
                <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.action == 'AMEND'}">
                    <div class="grid3">
                        <div align="center">
                            <h:outputText value="#{msg['reviewDetails.suspend']}"/><div align="center"></div>
                        </div>
                    </div>
                </rich:panel>
                <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
                    <div class="grid2">
                        <div align="center">
                            <h:outputText value="#{msg['reviewDetails.exclude']}"/><div align="center"></div>
                        </div>
                    </div>
                </rich:panel>
            <br class="clear" />

            <div class="floatleft">

                    <div class="row3">
                        <div class="row1">

                        <!-- January -->
                            <!-- Months Column -->
                            <div class="grid1">
                                <label>
                                    <h:outputText readOnly="true" disabled="true" size="4" value="#{msg['calendar.month.0']}" />
                                </label>
                            </div>
                            <!-- Reduce check box --> 
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
                                <div class="grid2">
                                    <div align="center">
                                        <h:selectBooleanCheckbox 
                                            id="reduce12" 
                                            value="#{mandate.remittanceDetails.remittanceFrequencys[0].reduce}" 
                                            disabled="#{mandate.remittanceDetails.remittanceFrequencys[0].exclude}">
                                            <a4j:ajax event="click" render="remittanceFrequency" />
                                        </h:selectBooleanCheckbox>
                                    </div>
                                </div>
                            </rich:panel>
                            <!-- Suspend check box --> 
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal != 1}">
                                <div class="grid2hidden">
                                    <h:outputText value="&#160;" />
                                </div>
                            </rich:panel>
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.action == 'AMEND'}">
                                <div class="grid3">
                                    <div align="center">
                                    <h:selectBooleanCheckbox 
                                        id="suspend0" 
                                        value="#{mandate.remittanceDetails.remittanceFrequencys[0].suspend}">
                                        <a4j:ajax event="change" />
                                    </h:selectBooleanCheckbox>
                                    </div>
                                </div>
                            </rich:panel>
                            <!-- Exclude check box --> 
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal == 1}">
                                <div class="grid2">
                                    <div align="center">
                                    <h:selectBooleanCheckbox 
                                        id="exclude0" 
                                        value="#{mandate.remittanceDetails.remittanceFrequencys[0].exclude}" 
                                        disabled="#{mandate.remittanceDetails.remittanceFrequencys[0].reduce}">
                                        <a4j:ajax event="change" render="remittanceFrequency" />
                                    </h:selectBooleanCheckbox>
                                    </div>
                                </div>
                            </rich:panel>
                            <rich:panel styleClass="ddo-panel" rendered="#{taxheadDirectDebit.isSeasonal != 1}">
                                <div class="grid2hidden">
                                    <h:outputText value="&#160;" />
                                </div>
                            </rich:panel>
                            <div class="errorRemittance">
                                <rich:message styleClass="errorText" for="remittanceAmount0"/>
                            </div>
                            <!-- Monthly Amount field --> 
                            <div class="grid5">
                                <h:inputText 
                                    id="remittanceAmount0" size="30" maxlength="8" readOnly="true"
                                    value="#{mandate.remittanceDetails.remittanceFrequencys[0].amount}" 
                                    disabled="#{!mandate.remittanceDetails.remittanceFrequencys[0].reduce}" 
                                    label="#{msg['remittanceDetails.amountToBeDebited']}">
                                    <a4j:ajax event="change" render="remittanceFrequency" />
                                </h:inputText>
                            </div>
                        </div>
                    </div>

                <div class="errorText" font="bold">
                    <rich:message styleClass="errorTextNoPadding" for="continue"/>
                </div>
                </div>

                </div>
                </a4j:outputPanel>
                </fieldset>
            </a4j:outputPanel>

            <rich:message>
                <rich:message for="remittanceFrequency" ajaxRendered="true" />
            </rich:message>

        </ui:repeat>

I've taken out a lot of my code here so there may be un macthed divs etc but the idea is there.

I have two problems:

  • You can see that some components have change events that render other components based on id. These don't work inside the repeat
  • I'm using webflow and adding messages to the message context so that the message tags can display validation messages but these don't work in the iteration either.

I have tried tr:iterator, c:forEach, a4j:repeat, tr:forEach. I'm pretty sure what I'm trying to do isn't possible the way I'm trying to do it so if anyone has experience trying to achieve similar I'd appreciate some help. I can't change the MVC frameowork I'm using but could use perhaps jQuery.

1

1 Answers

-1
votes

I solved this by moving the ajax region outside the repeat and just calling render on the whole region. Not beautiful I know but the quickest solution I could find.

On the message front I simply add the index of the item in the list being iterated over into the message.

"remittanceDetails:mandates:"+taxhead.getMandates().indexOF(mandate)+":remittanceAmount" + frequency.getMonth().getCode()

JSF looks after the rest.