问题
I recently upgraded to Primefaces 5.0 and was in the process of converting my charts to accommodate the new chart api in 5.0 when I came across a rather annoying problem where one of my Line Charts only refuses to render on this one specific page.
More Specifically:
A LineChart I have does not work on a specific page.
If put on another page, the chart works.
If put on the specific page where it was not working with all the other content deleted, it still does not work.
If the chart is placed on the specific page AND any other page, the charts on both pages will work...
-By not working I mean that instead of appearing normally, a blank space roughly the size of the chart appears on the page. Additionally, navigating to a view with this broken chart prevents me from switching to other pages, almost as if everything freezes.
I am 100% sure my beans are not causing the problem because I was able to create the chart successfully, not not on the specific page.
I have been trying to figure out the problem for well over 10 hours to no avail. Hopefully someone can figure out what is wrong.
index.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Arbitrage Online: Member's Area</title>
<h:outputStylesheet library="css" name="layout.css"/>
<h:outputScript library="js" name="functions.js"/>
</h:head>
<h:body id="body" styleClass="body">
<p:layout fullPage="true" widgetVar="layoutWdgt">
<p:layoutUnit position="north" size="60" gutter="0" styleClass="headerArea">
<ui:include src="template/header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="278" gutter="0" styleClass="menuArea">
<ui:include src="template/menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" gutter="0" styleClass="contentArea">
<h:panelGroup id="contentAreaPanel">
<ui:include src="#{navigationBean.pageName}.xhtml" />
</h:panelGroup>
</p:layoutUnit>
<p:layoutUnit position="south" size="47" gutter="0" styleClass="footerArea">
<p:outputPanel styleClass="copyright">Copyright © Arbitrage Online, 2014. All rights reserved.</p:outputPanel>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
menu.html:
<ui:composition
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:form id="menuForm">
<p:menu style="width:100%;" styleClass="leftMenu">
<p:menuitem value="Overview" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/overview')}" styleClass="ui-state-active" style="border-top: none !important;" icon="ui-icon-home24" update=":contentAreaPanel"/>
<p:menuitem value="Add Items" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/addAmazonItems')}" icon="ui-icon-home" update=":contentAreaPanel"/>
<p:menuitem value="Manage Items" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/manageAmazon')}" icon="ui-icon-disk" update=":contentAreaPanel"/>
<p:menuitem value="View eBay Results" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/manageEbay')}" icon="ui-icon-home" update=":contentAreaPanel"/>
<p:menuitem value="Manage Snipes" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/overview')}" icon="ui-icon-home" update=":contentAreaPanel"/>
<p:menuitem value="Manage Excludes" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}" icon="ui-icon-home" update=":contentAreaPanel" />
<p:menuitem value="Submit a Ticket" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}" icon="ui-icon-home" update=":contentAreaPanel" />
<p:menuitem value="View Tutorials" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}" style="border-bottom: none !important;" icon="ui-icon-home" update=":contentAreaPanel" />
</p:menu>
</h:form>
</ui:composition>
The Specific page it is not working on (manageAmazon.xhtml):
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:form id="amazonItemForm" onreset="#{amazonTableBean.populateTableItems()}" >
<h:outputText value="Manage Amazon Products" styleClass="addItemsTitle" />
<h:panelGroup id="manageAmazonPanel" layout="block" styleClass="manageAmazonTablePanel" >
<p:dataTable var="amazonItem" value="#{manageItemsBean.amazonItemList}" scrollHeight="700" scrollable="true" styleClass="manageAmazonTable" rowExpandMode="single" widgetVar="manageAmazonWidget">
<p:column style="width:16px" styleClass="rowToggle">
<p:rowToggler />
</p:column>
<p:column headerText="Product Identifier" sortBy="#{amazonItem.itemASIN}" filterBy="#{amazonItem.itemASIN}" filterMatchMode="contains" >
<h:outputText value="#{amazonItem.itemASIN}" />
</p:column>
<p:column headerText="Product Name" sortBy="#{amazonItem.itemName}" filterBy="#{amazonItem.itemName}" filterMatchMode="contains" colspan="3">
<h:outputText value="#{amazonItem.itemName}"/>
</p:column>
<p:column headerText="Product Rank" sortBy="#{amazonItem.itemRank}">
<h:outputText value="#{amazonItem.itemRank}"/>
</p:column>
<p:column headerText="New Price" sortBy="#{amazonItem.newPrice}">
<h:outputText value="$#{amazonItem.newPrice}"/>
</p:column>
<p:column headerText="Used Price" sortBy="#{amazonItem.usedPrice}">
<h:outputText value="$#{amazonItem.usedPrice}"/>
</p:column>
<p:column headerText="Collectible Price" sortBy="#{amazonItem.collPrice}">
<h:outputText value="$#{amazonItem.collPrice}"/>
</p:column>
<p:rowExpansion>
<p:outputPanel deferred="true" layout="block" styleClass="singleItemPanel">
<h:panelGroup layout="block" styleClass="singleItemName">
<p:inplace id="nameInplace" editor="true" styleClass="singleItemNameContent" >
<p:inputText value="#{amazonItem.itemName}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'name')}" update="nameInplace"/>
</p:inplace>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemImage">
<h:graphicImage value="#{amazonItem.imageUrl}" styleClass="singleItemImageContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemId">
<h:outputText value="Product ID: #{amazonItem.itemASIN}" styleClass="singleItemIdContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemRank">
<h:outputText value="Product Rank: #{amazonItem.itemRank}" styleClass="singleItemRankContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemNewPrice">
<h:outputText value="New Price: " styleClass="singleItemRankContent"/>
<h:outputText value="$#{amazonItem.newPrice}" styleClass="singleItemNewPriceContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemUsedPrice">
<h:outputText value="Used Price: " styleClass="singleItemRankContent"/>
<h:outputText value="$#{amazonItem.usedPrice}" styleClass="singleItemUsedPriceContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemCollPrice">
<h:outputText value="Collectible Price: " styleClass="singleItemRankContent"/>
<h:outputText value="$#{amazonItem.collPrice}" styleClass="singleItemCollPriceContent"/>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemMaxBids">
<h:outputText value="Max Bids: " styleClass="singleItemRankContent"/>
<p:inplace id="bidsInplace" editor="true" styleClass="singleItemMaxBidsContent">
<p:inputText value="#{amazonItem.maxBids}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'bids')}" update="bidsInplace"/>
</p:inplace>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemNetProfits">
<h:outputText value="Net Profits (%): " styleClass="singleItemRankContent"/>
<p:inplace id="profitsInplace" editor="true" styleClass="singleItemNetProfitsContent" >
<p:inputText value="#{amazonItem.netProfits}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'profits')}" update="profitsInplace"/>
</p:inplace>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemInclude">
<h:outputText value="Include Keywords: " styleClass="singleItemRankContent"/>
<p:inplace id="includeInplace" editor="true" styleClass="singleItemIncludeContent" >
<p:inputText value="#{amazonItem.includeKeywords}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'include')}" update="includeInplace"/>
</p:inplace>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="singleItemExclude">
<h:outputText value="Exclude Keywords: " styleClass="singleItemRankContent"/>
<p:inplace id="excludeInplace" editor="true" styleClass="singleItemExcludeContent">
<p:inputText value="#{amazonItem.excludeKeywords}" required="true"/>
<p:ajax event="save" partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'exclude')}" update="excludeInplace"/>
</p:inplace>
</h:panelGroup>
</p:outputPanel>
<p:chart type="line" model="#{manageItemsBean.createAmazonPriceChart(amazonItem)}"/>
</p:rowExpansion>
</p:dataTable>
</h:panelGroup>
</h:form>
</ui:composition>
A random page it works on (overview.xhtml). I changed the code of the chart a bit to test it on this page because this page does not have an (amazonItem). Doing this the chart worked on this page, but it still produced the same problem on the other page:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
</ui:composition>
回答1:
This is caused by the original page not including a chart. Only the base primefaces js is loaded than, which does not include the chart js. So when you dynamically change the include it is not loaded. In that case adding it manually solves the issue
<link rel="stylesheet" href="/javax.faces.resource/charts/charts.css.jsf?ln=primefaces"/>
<h:outputScript library="primefaces" name="charts/charts.js"/>
Actualy this was loaded when my application start for the current displayed page but not when i had new page once the application was running. Hope this help.
来源：https://stackoverflow.com/questions/23835687/linechart-not-rendering-for-primefaces-5-0