我使用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，但也许我错了。当我写这篇参考资料时，我是根据这个选择的答案。有一个不同于我的问题，但有一种方法可以引用<p:commandButton> ID组件，所以我认为它会起作用。

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

$(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]);
  });
});

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

解决方案

最后，我使用了<p:commandButton>组件的oncomplete属性，而不是从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

解决方案

相关内容

最新更新

热门标签：