triggerChange() function not working in JSF?

Question

I have a specific requirement where I have to update a dataTable by onchange event of a selectOneMenu but it seems that the dataTable is not getting updated. I've tried to use triggerChange() function, with no luck. Please find the below code that I have tried.

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();
}

The above function does not get called, and the values in the dataTable remain the same even though, I change the value in the dropdown.

Answer 1

Having process, immediate, partialSubmit all together is pointless.

Now the main purpose of the ajax is to call triggerChange() thus there's no need to trigger it manually by the onchange event.

Try to simple the process by having the following:

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

You should check your console output, I have included the oncomplete just to make sure that you don't have any validation errors which prevent the update process.

If you have any validation errors you should work on that point in order to get to your goal.

Note: the default value of the event is change.