javascript - 如何使用 JSF 和 Javascript 在下拉选择时动态更新 Google 区域图表数据

Question

我有一个用 JSF/JEE 1.7 编写并部署在 Glassfish 4.0 上的应用程序。

我的用例是，当用户从下拉列表中进行选择(在 JSF 中选择一个菜单)时，将显示/刷新关联的 Google 区域图表。随后，当选择发生更改时，Google 区域图表应自行更新。

在下面展示我的代码。

Javascript code (inside the XHTML template for the page)

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', { 'packages' : [ 'corechart' ] });

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawRegionChart);

  function drawRegionChart() {
      // Create the data table.
      var data = google.visualization.arrayToDataTable([
      [ 'State', 'Count' ],
          #{productProfileListController.regionChartData}
      ]);

      // Set chart options
      var options = {
        region: 'IN',
        displayMode: 'regions',
        resolution: 'provinces',
        title:'Presence of product or service found in states',
        width: 640, 
        height: 480
      };

      var chart = new google.visualization.GeoChart(document.getElementById('region_chart_div'));
      chart.draw(data, options);
  }   
</script>

从 bean 传递 JSON 的位置是上面代码中的 #productProfileListController.regionChartData}。

JSF code (inside the same XHTML template)

<!-- Page section that allows the user to make a selection. -->
<div class="form-group">
  <h:outputLabel for="product-service" value="Please select Product or Service" styleClass="control-label" /><span style="color:red;">*</span>

  <!-- Dropdown list from which the user can make a selection. -->
  <h:selectOneMenu id="product-service" required="true" value="#{productProfileListController.product}" styleClass="form-control">
    <f:selectItems value="#{productListController.products}" var="product" itemValue="#{product}" 
                   itemLabel="#{productListController.getDisplayText(product)}"/>
    <f:converter converterId="domainConverter" />        
    <f:ajax event="change" listener="#{productProfileListController.valueChanged}" render="product-profile-panel" execute="@this" />
  </h:selectOneMenu>
  <h:message for="product-service" styleClass="text-danger" />
</div> 

<!-- Page section that refreshes based on the user selection. -->
<h:panelGroup id="product-profile-panel" layout="block">
  <h:panelGroup rendered="#{not empty productProfileListController.productProfileListByHSCode}" layout="block">
    <h2 class="page-header plain-header">
      <i class="icon-star icon-sm"></i> Presence in states across India
    </h2>

    <!-- Force the chart to be redrawn. -->
    <script type="text/javascript">
      drawRegionChart()
    </script>

    <!-- Container for the Google Region chart to be displayed. -->
    <div id="region_chart_div" style="width:80%;height:450px;"></div>
  </h:panelGroup>
</h:panelGroup>

The JSF bean

class ProductBean {
    private String regionChartData;

    public void valueChanged(AjaxBehaviorEvent event) {
        // Determine the selected product.

        regionChartData = ... build data for the chart based on the selected product ...
    }

    public String getRegionChartData() {
        return regionChartData;
    }
}

在调试时，我看到方法 valueChanged 在下拉列表中发生更改时被调用。它还将 regionChartData 设置为预期值。但是，getRegionChartData 返回 null，因此每次下拉值更改时， map 都不会显示任何内容，因为从 XHTML 文件调用 drawRegionChart() 会返回 regionChartData为null。

您能否帮助我了解问题出在哪里，以及 Google 图表在下拉选择更改后将如何更新？

Answer 1

您无法更新包含 drawRegionChart() 函数和 #{productProfileListController.regionChartData} 的脚本。后一个 EL 不会像您期望的那样每次调用 javascript 函数时都会被调用。仅当(重新)渲染该部件时才会调用它。将此脚本放入

<h:panelGroup id="product-profile-panel" ...> </panelGroup>

您在ajax调用中执行更新它就会起作用。您还可以只使用变量定义一个小的 javascript 部分，这样要更新的代码量就会更少，然后将其作为参数调用 drawRegionChart()。