Ajax更新后如何调用方法

如何解决Ajax更新后如何调用方法

我有两个selectOneMenu：第一个选择用户想要的对象（区域，等级，年龄），第二个过滤它。

例如：

地区有西，北，南和东

成绩分为A，B，C和D

因此，当用户选择“ group by”选项时，侦听器将调用 onChangeGroupBy ，从而加载所选选项的整个列表。因此，如果用户选择了Region，则 onChangeGroupBy 设置 selectedFilterBy = [西，北，南，东]。

此外，我有一个更新的过滤器，调用了 flyoutId：cardsPanelId 。第二个过滤器使用用户在此处这两个selectOneMenu上选择的相同输入。 onChangeFilterBy 方法过滤列表以绘制图表，并设置第二个过滤器的输入。

问题是：我想按=成绩和筛选器= D选择分组。在我更改A，B，C和D之间的选项的同时，第二个筛选器和图表正确更新。在那之后，如果我选择group by = region，那么我的过滤器将更新为西，北，南和东，但是不会调用 onChangeFilterBy ，因此过滤器和图表不会更新，但是我需要更新它。

我该怎么做？我试图强制onChangeGroupBy在方法末尾调用onChangeFilterBy，但这会导致问题，因为有时filterBy包含旧值。例如：filterBy = [A，B，C，D]，但selectedGroupBy是Region。

xhtml

<p:outputPanel id="selects" styleClass="selects">
              <p:outputPanel id="groupPanel" styleClass="select-panel">
                  <p:outputLabel for="groupDashboardBy" value="Group by" styleClass="select-label"/>
                  <p:selectOneMenu id="groupDashboardBy" value=“#{bean.selectedGroupBy}">
   <f:selectItems value=“#{bean.groupBy}"/>
   <p:ajax update="@(.dashboards) filterPanel flyoutId:cardsPanelId" process="@this" listener="#{topicBean.dashboardHandler.onChangeGroupBy()}" oncomplete="dashboardCharts.loadDashboards()"/>
</p:selectOneMenu>
              </p:outputPanel>
              <p:outputPanel id="filterPanel" styleClass="select-panel">
                  <p:outputLabel for="filterDashboard" value=“#{bean.selectedGroupBy}" styleClass="select-label"/>
                  <p:selectOneMenu id="filterDashboard" value=“#{bean.selectedFilterBy}">
                      <f:selectItems value=“#{bean.filterBy}" />
                      <p:ajax update="@(.dashboards) filterPanel flyoutId:cardsPanelId" process="@this" listener=“#{bean.onChangeFilterBy()}" oncomplete="dashboardCharts.loadDashboards()"/>
                  </p:selectOneMenu>
              </p:outputPanel>
          </p:outputPanel>

bean

public void onChangeGroupBy() {
        switch (selectedGroupBy) {
            case REGION:
                this.setFilterBy(regionSelectItems);
                onChangeFilterBy();
                break;
            case GRADEs:
                this.setFilterBy(gradesSelectItems);
                onChangeFilterBy();
                break;
        }
    }

public void onChangeFilterBy() {
   String selectedGroupBy = this.selectedGroupBy;
   List<Card> cards = new ArrayList<>();
   this.model.resetFilters();

   switch (selectedGroupBy) {
      case REGION:
            this.model.setSelectedRegion(Collections.singletonList(selectedFilterBy));
            for (Card card : allCards) {
               //filter in the list and add in cards
               }
        
         generateChart(chartOne,cards);
         generateChart(chartTwo,cards);
         generateChart(chartThree,cards);
         break;
      case GRADES:
        
            this.model.setSelectedGrades(Collections.singletonList(selectedFilterBy));
            for (Card card : allCards) {
               //filter in the list and add in cards
            }
         }
         generateChart(chartOne,cards);
         break;
   }
   this.model.secondFilter();
}

解决方法

我相信您需要做的是为您的 p：ajax 标签添加事件属性。

尤其是：

<p:ajax event="change" update="@(.dashboards) filterPanel flyoutId:cardsPanelId"  process="@this" listener="#{topicBean.dashboardHandler.onChangeGroupBy()}" oncomplete="dashboardCharts.loadDashboards()"/>

这将确保更改选择时调用侦听器。