如何使用JSF和Javascript在下拉列表选择中动态更新Google Region Chart数据

Question

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

我的用例是，当用户从下拉列表中选择（在JSF中选择一个菜单）时，会显示/刷新关联的Google Region Chart。随后，当选择更改时，Google区域图表应自行更新。

在下面提供我的代码。

Javascript代码（在页面的XHTML模板中）

<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>

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

JSF代码（在同一个XHTML模板中）

<!-- 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>

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，以便每次下拉值更改时，地图都不会显示任何内容，因为从XHTML文件调用drawRegionChart()会将regionChartData作为null返回。

您能帮忙告诉我这里的问题在哪里，以及谷歌图表在下拉选择更改后如何更新？

Answer 1

您无法更新包含drawRegionChart()函数和#{productProfileListController.regionChartData}的脚本。每次调用javascript函数时都不会调用后一个EL，因为您似乎期待它。仅在（重新）渲染零件时调用它。把这个脚本放在里面

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

你在ajax调用中更新它，它会工作。您还可以使用变量定义一个小的javascript部分，以便更新的代码量更少，并将其作为参数调用drawRegionChart（）。