【发布时间】：2016-07-21 19:59:16
【问题描述】：
我使用 JSF 2.2、Primefaces 6.0 和 CDI。我的一个页面包含一个脚本，该脚本具有两个 javascript 函数（其中一个创建图表，第二个为图表提供新数据）和一个用作过滤器的简单表单。我已经剪切了我的代码（请看下面），以向您展示我的代码中最重要的部分。
我想实现这样的目标：
- 第一次加载/打开页面时，第一个 javascript 函数应该运行（自动运行，无需任何按钮或链接），并且应该使用我在 cdi bean 中设置的几个回调参数。
- 每次按下按钮时，第二个 javascript 函数应该运行并且应该使用我在 CDI bean 中设置的几个回调参数。
如您所见，上述机制基于通过RequestContext 将一些值从CDI bean 传递到javascript。为了实现这一点，我基于 primefaces documentation（第 11.1 章）。到目前为止，我已经：
- 为 CDI bean 的
init()方法（具有@PostConstruct注释）中的第一个函数创建了几个回调参数； - 将
oncomplete属性添加到<p:commandButton>组件，该组件调用带有args参数的函数的第二个。我想传递给第二个函数的值是在我在按钮的action属性中调用的actionFilterButton()方法中准备的。
目前我的页面是这样的：
- 当页面被加载/打开时，第一个 javascript 函数没有被执行。
- 当我按下按钮时，将执行第二个 javascript 函数，并将回调参数的值保存在 javascript 变量中。
你怎么看，问题是第一阶段。当我打开我的页面时，第一个 javascript 函数没有执行。
如何调用第一个 javascript 函数？
我尝试了什么？
- 我尝试在
init()方法中调用服务器端调用requestContext.execute("firstFunction(args)");的第一个javascript 函数，希望它能工作，但它不起作用，并且在我使用表单时它会破坏我的表单。我不确定我是否可以像在服务器端那样将args放入（实际上我不确定它是否被正确解释）。 - 我还尝试在脚本末尾调用
firstFunction()（如下所示），但效果不佳。
我的 xhtml 页面：
<!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>
<div id="container" style="height: 750px; width: 100%; margin: 0 auto;"/>
<script type="text/javascript">
//<![CDATA[
//Declaration of variables
var chart;
var data1;
var data2;
var data3;
function firstFunction(args) {
$(function() {
data1 = JSON.parse(args.data1);
data2 = JSON.parse(args.data2);
data3 = JSON.parse(args.data3);
//Other operations
});
}
function secondFunction(args) {
$(function() {
data1 = JSON.parse(args.data1);
data2 = JSON.parse(args.data2);
data3 = JSON.parse(args.data3);
//Other different operations
});
}
firstFunction(args);
//]]>
</script>
<br/>
<h:form id="filterForm">
<p:selectManyCheckbox id="filter" value="#{chart2Controller.selectedKindOfNetwork}" layout="responsive" columns="4">
<p:ajax update="filterButton" />
<f:selectItems value="#{chart2Controller.kindOfNetwork}" var="kindOfNetwork" itemLabel="#{kindOfNetwork}" itemValue="#{kindOfNetwork}" />
</p:selectManyCheckbox>
<br/>
<p:commandButton id="filterButton" value="Filter" action="#{chart2Controller.actionFilterButton()}"
disabled="#{!chart2Controller.visibilityFilterButton}"
update="filterForm"
oncomplete="secondFunction(args);"/>
</h:form>
</h:body>
</html>
我的 CDI bean 的一部分：
@Named
@ViewScoped
public class Chart2Controller implements Serializable {
/**
* Start method.
*/
@PostConstruct
public void init() {
initData();
//This isn't work.
//requestContext.execute("firstFunction(args)");
}
/**
* Downloading the data from the database.
*/
private void initData(){
/*
* Sending the query to the database including the filter options of the form,
* saving the result and preparing the data basing on the result.
*/
//Preparing the callback parameters.
requestContext = RequestContext.getCurrentInstance();
requestContext.addCallbackParam("data1", data1);
requestContext.addCallbackParam("data2", data2);
requestContext.addCallbackParam("data3", data3);
}
/**
* Action for the filter button.
*/
public void actionFilterButton(){
initData();
}
/**
* Visibility for filter button.
*/
public boolean getVisibilityFilterButton(){
//return true or false.
}
//Getter and Setter
private static final long serialVersionUID = -8128862377479499815L;
@Inject
private VisualizationService visualizationService;
private RequestContext requestContext;
private List<ChartModel2> data;
private List<String> kindOfNetwork;
private List<String> selectedKindOfNetwork;
private String data1;
private String data2;
private String data3;
}
【问题讨论】：
标签： javascript jsf primefaces requestcontext