Primefaces更新消息的Javascript代码未执行答案

【问题标题】：Javascript Code of Primefaces update message is not executedPrimefaces更新消息的Javascript代码未执行
【发布时间】：2015-09-19 18:42:25
【问题描述】：

我写了一个带有 primefaces 的 WebApplication，我想要一个 LineChart，当用户单击命令按钮时更新它，但问题是更新消息中的 Javascript 代码没有执行。当我使用整页重新加载时一切正常，但我只想加载图表。

<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
<changes>
<update id="j_idt5:updateContent">
<![CDATA[
 <div id="j_idt5:updateContent">
  <div id="j_idt5:j_idt61"></div>
  <script id="j_idt5:j_idt61_s" type="text/javascript">
   $(function() { 
    PrimeFaces.cw('Chart','widget_j_idt5_j_idt61',{id:'j_idt5:j_idt61',type:'line',data:[[[1,-4.6561797752809],[2,-13.229761904761904],[3,-6.608333333333333],[4,0.4268817204301071],[5,8.422222222222219],[6,16.11290322580645],[7,17.943333333333324],[8,17.434408602150537],[9,10.2741935483871],[10,7.395555555555553],[11,-4.247311827956989],[12,-13.69888888888889],[13,-14.916666666666666]]],legendPosition:"e",axes:{yaxis: {label:"",min:-40,max:40,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:"0"}},xaxis: {label:"",renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:"0"}}},series:[{label:'null',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}}],datatip:true},'charts');
   });
  </script>
 </div>
]]>
</update>
<update id="j_id1:javax.faces.ViewState:0"><![CDATA[5139549028331610861:-637056038719420489]]></update>
</changes>
</partial-response>

如果我复制服务器发回的代码并手动运行它，则会出现更新的图表。

我可以强制 JavaScript 自己运行这个函数吗

模板.xhtml：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>#{title}</title>
<link rel="stylesheet" type="text/css" href="css/masterStyle.css" />
</h:head>
<h:body>
 <h:form>
    <p:layout fullPage="true">
        <p:layoutUnit position="north" resizable="false" scrollable="false">
            <p:tabMenu activeIndex="#{id}">
                <p:menuitem value="A" outcome="a" />
                <p:menuitem value="B" outcome="b" />
                <p:menuitem value="C" outcome="c" />
            </p:tabMenu>
            <p:toolbar>
                <f:facet name="left">
                    <ui:insert name="updateBtn" />
                </f:facet>
            </p:toolbar>
        </p:layoutUnit>
        <p:layoutUnit position="center">
            <ui:insert name="content" />
        </p:layoutUnit>
    </p:layout>
</h:form>
</h:body>
</html>

a.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:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:body>
    <ui:composition template="template.xhtml">
        <ui:param name="id" value="0" />
        <ui:param name="title" value="A" />
        <ui:define name="updateBtn">
            <p:commandButton value="Test"
                actionListener="#{aController.update}" ajax="true">
                <p:ajax update="updateContent" /> <!-- I also tried update="chart" -->
            </p:commandButton>
        </ui:define>
        <ui:define name="content">
            <p:fragment id="updateContent">
                <p:chart id="chart" type="line" model="#{aController.lineModel}" />
            </p:fragment>
        </ui:define>
    </ui:composition>
</h:body>
</html>

AController.java

package view;

import java.io.Serializable;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.LineChartModel;
import org.primefaces.model.chart.LineChartSeries;

@ManagedBean(name = "aController")
@SessionScoped
public class AController implements
        Serializable {

    private LineChartModel lineModel;

    @PostConstruct
    public void init() {
        lineModel = new LineChartModel();
    }

    public LineChartModel getLineModel() {
        return lineModel;
    }

    public void setLineModel(LineChartModel lineModel) {
        this.lineModel = lineModel;
    }

    public void update() {
        List<Double> values = database.DBManager.INSTANCE.getValues();

        lineModel.clear();
        lineModel.setLegendPosition("e");

        Axis yAxis = lineModel.getAxis(AxisType.Y);
        yAxis.setMin(-40);
        yAxis.setMax(40);

        LineChartSeries chartSeries = new LineChartSeries();

        for (int i = 0; i < values.size(); i++) {
            if (values.get(i) != null) {
                chartSeries.set(i + 1, values.get(i));
            }
        }

        lineModel.addSeries(chartSeries);
    }
}

【问题讨论】：

如果需要，请输入您的视图和 bean 代码。有了响应的代码，我们什么都做不了。
我添加了它。我希望它会有所帮助。

标签： javascript jquery jsf jsf-2 primefaces

【解决方案1】：

您必须在开始时处理一个空图表。因此，您必须防止无序列地渲染它以避免 JS 错误。在我的解决方案中，我还更改了 Commandbutton 定义。

尝试将a.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:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:body>
    <ui:composition template="template.xhtml">
        <ui:param name="id" value="0" />
        <ui:param name="title" value="A" />
        <ui:define name="updateBtn">
            <p:commandButton value="Test" actionListener="#{aController.update}" update="updateContent"/>
        </ui:define>
        <ui:define name="content">
            <p:outputPanel id="updateContent">
                <p:chart id="chart" type="line" model="#{aController.lineModel}" rendered="#{not empty aController.lineModel.series}"/>
            </p:outputPanel>
        </ui:define>
    </ui:composition>
</h:body>
</html>

【讨论】：