LineChart не рендеринг для Primefaces 5.0

Недавно я обновился до Primefaces 5.0 и занимался преобразованием моих диаграмм, чтобы приспособить новый api диаграммы в 5.0, когда столкнулся с довольно раздражающей проблемой, когда один из моих линейных графиков отказывается отображать только на этой конкретной странице.

Более конкретно:

Линейная диаграмма у меня не работает на конкретной странице.

Если положить на другую страницу, график работает.

Если поместить на определенную страницу, где он не работал со всем другим удаленным контентом, он все равно не будет работать.

Если график размещен на определенной странице И любой другой странице, графики на обеих страницах будут работать...

-Потому что я не работаю, я имею в виду, что вместо обычного появления на странице появляется пустое пространство, примерно равное размеру диаграммы. Кроме того, переход к представлению с этой разбитой диаграммой не позволяет мне переключаться на другие страницы, как будто все зависает.

Я на 100% уверен, что мои бины не вызывают проблемы, потому что я смог успешно создать диаграмму, а не на конкретной странице.

Я пытался выяснить проблему более 10 часов, но безрезультатно. Надеюсь, кто-то может понять, что не так.

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>

Специальная страница, на которой он не работает (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>

Случайная страница, на которой он работает (Overview.xhtml). Я немного изменил код диаграммы, чтобы протестировать ее на этой странице, потому что на этой странице нет (amazonItem). При этом диаграмма работала на этой странице, но на другой странице она все еще вызывала ту же проблему:

<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 ответ

Это вызвано тем, что исходная страница не включает диаграмму. Загружается только базовое число js, которое не включает диаграмму js. Поэтому, когда вы динамически изменяете включение, оно не загружается. В этом случае добавление его вручную решает проблему

<link rel="stylesheet" href="/javax.faces.resource/charts/charts.css.jsf?ln=primefaces"/>
<h:outputScript library="primefaces" name="charts/charts.js"/>

Фактически это было загружено, когда мое приложение запускается для текущей отображаемой страницы, но не когда у меня была новая страница после запуска приложения. Надеюсь, это поможет.

Источник
Другие вопросы по тегам