Как динамически обновлять данные диаграммы регионов Google после выбора в раскрывающемся списке с помощью JSF и Javascript

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>

Место, где 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

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, поэтому при каждом изменении значения раскрывающегося списка карта ничего не показывает, поскольку при вызове drawRegionChart() из файла XHTML возвращается regionChartData как null.

Не могли бы вы помочь мне сообщить, в чем здесь проблема, и как диаграмма Google будет обновляться при изменении выпадающего списка?

Answer 1

Вы нигде не обновляете скрипт, который содержит функцию drawRegionChart() и #{productProfileListController.regionChartData}. Этот последний EL не будет вызываться каждый раз, когда вызывается функция javascript, как вы, вероятно, ожидаете. Он вызывается только тогда, когда деталь (пере) визуализирована. Поместите этот скрипт в

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

который вы делаете обновляете в вызове ajax, и это будет работать. Вы также можете просто определить небольшую часть javascript с переменной, чтобы уменьшить объем кода, который нужно обновить, и вызвать drawRegionChart () с этим параметром.