如何在 Ajax 更新后调用方法

Question

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

例如：

地区有西、北、南、东

等级有A、B、C和D

因此，当用户选择“分组依据”选项时，侦听器会调用 onChangeGroupBy，它会加载所选选项的整个列表。因此，如果用户选择了 Region，则 onChangeGroupBy 设置 selectedFilterBy = [West, North, South, East]。

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

问题是：我想选择 group by = grades 和 filter = 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>

豆

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);
         generateChart(chartTwo, cards);
         generateChart(chartThree, cards);
         break;
   }
   this.model.secondFilter();
}

Answer 1

我相信您需要做的是为您的 p:ajax 标签添加一个 event 属性。

特别是：

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

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