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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用JSF和Javascript在下拉列表选择中动态更新Google Region Chart数据相关的知识,希望对你有一定的参考价值。

我有一个用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返回。

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

答案

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

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

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

以上是关于如何使用JSF和Javascript在下拉列表选择中动态更新Google Region Chart数据的主要内容,如果未能解决你的问题,请参考以下文章

JSF 1.1-不刷新页面调用backing bean的动作方法(通过ajax/javascript)

JSF 2下载JavaScript和Ajax支持[重复]

如何使用Javascript根据先前的下拉值显示第二个下拉列表

使用javascript为下拉列表赋值

Laravel/Javascript:在选择不同的选择/下拉列表后填充选择/下拉列表

当我们使用 JavaScript 隐藏/显示时清除下拉列表和/或文本框内容当它们被交替选择时