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

Question

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

我的用例是，当用户从下拉列表中进行选择(在JSF中选择一个菜单(时，将显示/刷新显示的关联Google区域图表。随后，当选择发生变化时，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>

从 Bean 传递 JSON 的位置在上面的代码中#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。

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

Answer 1

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

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

您在 ajax 调用中更新它，它将起作用。你也可以用变量定义一个小的javascript部分，这样要更新的代码量就会减少，并用它作为参数调用drawRegionChart((。