表外的JSF Ajax组件更新不起作用

Question

I have below code, any of the components out side table does not update in ajax call. The component "lms-vouchers-error-div" and other component out side data is not updated.I tried so many ways, but it does not work. Please help."form" is the form id

<h:panelGroup id="lms-prestige-inner-div" layout="block"
            styleClass="lmsPricePlanInnerDiv">
            <table class="pricePlanTable">
                <ui:repeat var="vo" value="#{orderOverviewBean.prestigeVouchers}"
                    varStatus="status">

                    <ui:fragment rendered="#{status.index > 0}">
                        <tr>
                            <td colspan="2">
                                <h2 class="#{vo.atLeastOneItemSelected ? 'remove' : 'redeem'}">
                                    <span
                                        class="#{vo.atLeastOneItemSelected ? 'removeline-center' : 'redeemline-center'}">or</span>
                                </h2>
                            </td>
                        </tr>
                    </ui:fragment>
                    <tr>
                        <td style="width: 302px">Voucher
                            #{status.index+1}.$#{-vo.amount} expires on
                            &nbsp;#{vo.expireDate}</td>

                        <td class="spanDisable"><h:commandLink value="> Redeem"
                                styleClass="removeUnderline" rendered="#{not vo.selected}"
                                disabled="#{vo.atLeastOneItemSelected}"
                                action="#{orderOverviewBean.addPrestigeVoucher}">
                                <f:setPropertyActionListener
                                    target="#{orderOverviewBean.selectedVoucherItem}"
                                    value="#{vo}" />

                                <f:ajax
                                    render=":form:total-price-container :form:lms-vouchers-error-div :form:lms-prestige-div"
                                    onevent="lmsVoucherDisplayLoader.displayLoader" />
                            </h:commandLink> <h:commandLink value="> Remove" styleClass="removeUnderline"
                                rendered="#{vo.selected}"
                                action="#{orderOverviewBean.removePrestigeVoucher}">
                                <f:setPropertyActionListener
                                    target="#{orderOverviewBean.selectedVoucherItem}"
                                    value="#{vo}" />

                                <f:ajax
                                    render=":form:total-price-container :form:lms-vouchers-error-div :form:lms-prestige-div"
                                    onevent="lmsVoucherDisplayLoader.displayLoader" />
                            </h:commandLink></td>


                        <ui:fragment rendered="#{vo.selected}">

                            <td style="width: 350px; text-align: right;">
                                -$#{-vo.amount}</td>
                        </ui:fragment>

                    </tr>
                </ui:repeat>
            </table>
        </h:panelGroup>

Answer 1

A common mistake that lead to this kind of problems is make an ajax/updatable container conditionally rendered:

ie: if you try to update with ajax this container:

<ui:fragment id="lms-vouchers-error-div" rendered="#{false_condition}"/>

Even if the rendered condition change to true with your ajax/update process, it will not be rendered, because it doesn't exists in your previous html generated code, so instead, try to wrap (in an 'always visible wrapper container') your conditional container, with <h:panelGroup/> or if you use primefaces <p:outputPanel/>

ie:

<h:panelGroup id="target_to_update_with_ajax">
    <ui:fragment id="lms-vouchers-error-div" rendered="#{condition}"/>
</h:panelGroup>

This is a suggestion that maybe works for your case, but if you post the rest of your code it would be more clear.