解决方案

Question

我使用JSF 2.2，Primefaces 6.0和CDI。我的一个页面包括一个图表（Highcharts）和一个干扰我的图表的简单表格。我已经删除了我的代码，以向您展示我的代码中最重要的部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:pe="http://primefaces.org/ui/extensions">

<h:head> 
    <!-- loading css -->
</h:head>

<h:body>

    <script type="text/javascript">

        //<![CDATA[

        $(function () {

            //some code

            //create the chart
            $('#container').highcharts({
                //some code
            }); 

            //JS action for button
            $('#filterForm\\:filterButton').click(function () {

                var chart = $('#container').highcharts();
                //setting different data for chart and redraw the chart
            });

        });

        //]]>
    </script>

    <div id="container" style="height: 750px; width: 100%; margin: 0 auto;"/>

    <h:form id="filterForm">

        <p:selectManyCheckbox id="filter" value="#{visualizationController.selectedKindOfNetwork}" layout="responsive" columns="4">
            <p:ajax update="filterButton" listener="#{visualizationController.changeFiltrerForChart1a()}" />
            <f:selectItems value="#{visualizationController.kindOfNetwork}" var="kindOfNetwork" itemLabel="#{kindOfNetwork}" itemValue="#{kindOfNetwork}" />
        </p:selectManyCheckbox>

        <br/>

        <p:commandButton id="filterButton" value="Filtruj" action="#{visualizationController.actionFilterButtonForChart1a()}"
                        disabled="#{!visualizationController.visibilityFilterButtonForChart1a}"/>
    </h:form>

</h:body>         
</html>

我想实现这样的目标：

当我在表单中按commandButton时，下面的代码中的代码应该运行：

//JS action for button
$('#filterForm\\:filterButton').click(function () {

    var chart = $('#container').highcharts();
    //setting different data for chart and redraw the chart
});

您是否知道如何实现这一目标？

目前，当我按下commandButton时，此功能中的代码不会运行。在我看来，问题是参考ID组件：#filterForm\\:filterButton但也许我错了。当我写这篇参考文献时，我基于THIS选择的答案。有一个与我不同的问题，但有一种方法可以引用<p:commandButton> ID组件，所以我认为它可以工作。

BTW：如果我使用一个简单的按钮（没有表单），就像下面的代码片段一样，一切正常，但我需要<p:commandButton>组件。

＆＃13;

$(function() {
  $('#container').highcharts({
    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
  });


  // the button action
  $('#button').click(function() {
    var chart = $('#container').highcharts();
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Set new data</button>

＆＃13;

Answer 1

解决方案

最后，我使用了oncomplete组件<p:commandButton> atrribute而不是javascript代码中的<p:commandButton>。

首先，我创建了两个函数。其中一个我用来创建图表。其中第二个我用来执行一些与图表相关的代码。我也移动并在函数之外声明了一些重要的变量。它允许我在函数内部引用它们。最后，我通过组件的oncomplete属性执行第二个函数。

这是我修改后的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:pe="http://primefaces.org/ui/extensions">

<h:head> 
    <!-- loading css -->
</h:head>

<h:body>

    <script type="text/javascript">

        //<![CDATA[

        //Declaration of variables
        var chart;

        //other variables...

        function firstFunction() {

            //Create the chart
            $('#container').highcharts({
                //some code
            }); 
        }

        function secondFunction() {

            chart = $('#container').highcharts();
            //Setting different data for chart and redraw the chart.
        }

        firstFunction();

        //]]>
    </script>

    <div id="container" style="height: 750px; width: 100%; margin: 0 auto;"/>

    <h:form id="filterForm">

        <p:selectManyCheckbox id="filter" value="#{visualizationController.selectedKindOfNetwork}" layout="responsive" columns="4">
            <p:ajax update="filterButton" listener="#{visualizationController.changeFiltrerForChart1a()}" />
            <f:selectItems value="#{visualizationController.kindOfNetwork}" var="kindOfNetwork" itemLabel="#{kindOfNetwork}" itemValue="#{kindOfNetwork}" />
        </p:selectManyCheckbox>

        <br/>

        <p:commandButton id="filterButton" value="Filtruj" action="#{visualizationController.actionFilterButtonForChart1a()}"
                        disabled="#{!visualizationController.visibilityFilterButtonForChart1a}"
                        oncomplete="secondFunction();"/>
    </h:form>

</h:body>         
</html>

如何从javascript代码引用commandButton？

1 个答案:

解决方案