由另一个 ajax 事件重新呈现的 dataTable 中的 Ajax 事件不执行

Question

我正在构建一个发票应用程序。当用户选择客户端时，与客户端关联的服务会通过 ajax 事件在 dataTable 中重新呈现。但是，dataTable中selectOneMenu的ajax事件不会触发。

这是让用户选择客户端的表单：

<h:form>
    <h:selectOneMenu id="clientSelect" value="#{invoiceBean.client}">
        <f:ajax execute="clientSelect" listener="#{invoiceServiceListener.processClientValueChange}" render=":test :invoiceData"/>
        <f:selectItems value="#{invoiceBean.clientOptions}"/>
    </h:selectOneMenu>
</h:form>

这将触发一个 ajax 事件，该事件填充 invoiceBean 中的 services 数组并重新呈现 dataTable，该 dataTable 在 dataTable 的另一个 selectOneMenu 中显示服务。这部分工作正常。

这是上面表格选择客户端后重新渲染的数据表：

<h:panelGroup id="test">
    <h:dataTable id="invoiceData" value="#{attributes.priceAttributes}" var="loop">
        <h:column>
            <ui:param name="service" value="service#{loop}" /> 
            <ui:param name="description" value="description#{loop}" />
            <ui:param name="price" value="price#{loop}" />
            <h:form id="invoiceSelectMenu">
                <h:selectOneMenu id="selectMenu" value="#{invoiceBean[service]}">
                    <f:ajax event="change" execute="selectMenu" listener="#{invoiceServiceListener.procesServiceValueChange}" render="@form" />
                    <f:attribute name="row" value="#{loop}" />
                    <f:selectItems value="#{invoiceBean.services}" />
                </h:selectOneMenu>
                <h:inputText id="description" value="#{invoiceBean[description]}" />
                <h:inputText id="price" value="#{invoiceBean[price]}" />
                <h:outputText value="#{loop}" />
            </h:form>
        </h:column>
    </h:dataTable>  
</h:panelGroup>

selectOneMenu 已正确填充。但是，这个选择一个菜单中的 ajax 事件在它被第一个表单重新呈现后不起作用。但是，如果我手动填充服务数组而不提交第一个表单，那么这个 ajax 事件会正常执行。顺便说一句，这个 ajax 事件还为描述和价格输入字段设置了一个值，当事件发生时应该重新渲染。 invoiceBean 是请求范围内的。

Answer 1

这会很棘手。由于JSF spec issue 790，每当您使用<f:ajax> 重新渲染一些包含another <h:form> 的内容时，它的视图状态就会丢失。为了解决这个问题，您基本上需要在<f:ajax> 中引用另一个 <h:form> 的完整客户端ID，而不是某些包含组件。但是您基本上在 <h:dataTable> 中有多个表单，绝对客户端 ID 无法引用这些表单。

您需要重新排列代码以将<h:form> 放在<h:dataTable> 之外，并将<f:ajax> 更改为execute 仅必要的组件。

<h:form id="invoiceDataForm">
    <h:dataTable id="invoiceData" value="#{attributes.priceAttributes}" var="loop">
        <h:column>
            <ui:param name="service" value="service#{loop}" /> 
            <ui:param name="description" value="description#{loop}" />
            <ui:param name="price" value="price#{loop}" />
            <h:selectOneMenu id="selectMenu" value="#{invoiceBean[service]}">
                <f:ajax execute="selectMenu,description,price" listener="#{invoiceServiceListener.procesServiceValueChange}" render="@form" />
                <f:attribute name="row" value="#{loop}" />
                <f:selectItems value="#{invoiceBean.services}" />
            </h:selectOneMenu>
            <h:inputText id="description" value="#{invoiceBean[description]}" />
            <h:inputText id="price" value="#{invoiceBean[price]}" />
            <h:outputText value="#{loop}" />
        </h:column>
    </h:dataTable>
</h:panelGroup>

然后从第一种形式引用它，如下所示：

<f:ajax execute="clientSelect" listener="#{invoiceServiceListener.processClientValueChange}" render=":invoiceDataForm" />

请注意，PrimeFaces 等一些组件库已经在组件库特定的 ajax 引擎中解决/解决了这个问题。因此，如果您可能已经在使用 PrimeFaces，您也​​可以将第一种形式的 <f:ajax> 替换为 <p:ajax>。

---

与具体问题无关，<f:attribute name="row" value="#{loop}" /> 可能无法达到您的预期。它将设置null，因为<f:xxx> 标签在视图构建时运行，而不是在视图渲染时标签运行。 #{loop} 在视图构建期间不可用。但这是另一个问题的主题:)