javascript - triggerChange() 函数在 JSF 中不起作用？

Question

我有一个特定的要求，我必须通过 selectOneMenu 的 onchange 事件更新 dataTable 但似乎 dataTable 不是得到更新。我尝试使用 triggerChange() 函数，但没有成功。请找到我尝试过的以下代码。

xhtml

<p:selectOneMenu id="id" style="width:250px" 
                 value="#{priceCharterMBean.traffic.id}"
                 required="true"
                 requiredMessage="Traffic is required"
                 filter="true"
                 filterMatchMode="startsWith"
                 widgetVar="w_menu"
                 onchange="updateTable();">
  <p:ajax event="change" process="@this" 
          listener="#{priceCharterMBean.loadTEI}"
          update="aTEModelList"
          immediate="true"
          partialSubmit="true" />
  <f:selectItem itemLabel="Select" itemValue=""
                noSelectionOption="true" />
  <f:selectItems value="#{priceCharterMBean.trafficModelList}"
                 var="traffic" itemLabel="#{traffic.loadTrafficList}"
                 itemValue="#{traffic.id}" />
</p:selectOneMenu>

<p:dataTable style="width:350px" id="aTEModelList" var="aTEModelList" value="#{priceCharterMBean.aTEModelList}" rowKey="#{aTEModelList.id}">
  <p:column style="display: none">
    <f:facet name="header">
      <h:outputText value="Expense Id" />
    </f:facet>
    <h:outputText id="expId" value="#{aTEModelList.id}" />
  </p:column>
  <p:column>
    <f:facet name="header">
      <h:outputText value="Expense Short Description" title="#{text.expenseshortdescription}" />
    </f:facet>
    <h:outputText id="expenseShortDesc" value="#{aTEModelList.expenseShortDescription}" />
  </p:column>
  <p:column>
    <f:facet name="header">
      <h:outputText value="Actual Expense Value" title="#{text.actualexpensevalue}" />
    </f:facet>
    <h:inputText id="actualTrafficExpense" maxlength="8" value="#{aTEModelList.actualTrafficExpense}" />
  </p:column>
</p:dataTable>

javascript

function updateTable() {
    w_menu.triggerChange();
}

上面的函数没有被调用，并且 dataTable 中的值保持不变，即使我更改了下拉列表中的值。

Answer 1

将 process、immediate、partialSubmit 放在一起是没有意义的。

现在 ajax 的主要目的是调用 triggerChange() 因此不需要通过 onchange 事件手动触发它。

尝试通过以下方式简化流程:

<p:selectOneMenu value="#{priceCharterMBean.traffic.id}">
   <p:ajax process="@this" update="aTEModelList"
           oncomplete="console.log('validation: ' + args.validationFailed)" />
</p:selectOneMenu>

你应该检查你的控制台输出，我包含了 oncomplete 只是为了确保你没有任何阻止更新过程的验证错误。

如果您有任何验证错误，您应该在这一点上努力以实现您的目标。

注意:事件的默认值为change。