PrimeFaces Extensions Gchart is not working properly - primefaces

I am using PrimeFaces version 6.1 . I need to show my data in chart format. For this i implemented the GChart component as link https://www.primefaces.org/showcase-ext/sections/gchart/basic.jsf. I have added link in my form and on click of that link, i have rendered the chart. I need to show different chart in that form. So i have different panels for showing different charts on click of different buttons. when the page loads and on click of a link for first time, chart renders properly. Next time when i click the same link the whole page goes blank. I searched for error in console and error appears as shown below:
I need to refresh the page in order to get my page in working condition. I tried by giving id for pe:gChart tag and when i click on a link chart appears and on next click page goes blank and error appears as the container with new given id is not defined. My view code is like this:
<script src="https://www.gstatic.com/charts/loader.js"></script>
<h:form id="dash">
<p:commandLink id="savButton" class="small-box-footer" action="#{dashboardMB.createPieModel1}" update="#form">
<h:outputLabel styleClass="np" value="#{text.Detail}"/>
<i class="fa fa-arrow-circle-right"></i>
</p:commandLink>
<p:panel header="#{text.Saving}" rendered="#{dashboardMB.savVisible}" id="panelSav" closable="false" toggleable="true" >
<p:outputPanel id="container1" layout="block">
<div id="savChart">
<pe:gChart value="#{dashboardMB.savingChartModel}" width="400" height="400"
title="Saving Wise">
</pe:gChart>
</div>
</p:outputPanel>
</p:panel>
My managed bean code is like this:
public void createPieModel1() {
isSavVisible=true;
DashboardModel dashObj=new DashboardModel();
dashObj=dashBoardEJB.getvalues();
chartSavingModel = new GChartModelBuilder()
.setChartType(GChartType.COLUMN)
.addColumns("Topping", "Slices")
.addRow("A", dashObj.getCount1())
.addRow("V", dashObj.getCount2())
.addRow("Z", dashObj.getCount3())
.addRow("W", dashObj.getCount4())
.build();
}

You have a version mismatch. You are using PrimeFaces 6.1 but only using PrimeFaces Extensions 6.0.0. You PF and PFE versions must always match.
You can read the release notes guide to find out which version always lines up:
https://github.com/primefaces-extensions/primefaces-extensions.github.com/wiki/Release-Notes
So by upgrading to PFE 6.1.1 that will match your version and fix your issues.

Related

Primefaces Extensions BlockUI in Dialog

Primefaces 7.0, primefaces-extensions 7.0.2, JSF 2.1.19
Hello,
I want to use pe:blockUI for p:dialog and I figured out I can not use the "normal" outside blockUI I use in the whole application, because it does not block the dialog and so the user can click random stuff during the ajax request. So I use a separate blockUI element in the dialog to also block the dialog inputs.
That is working, the only problem I have is that he message part of the blockUI ("please wait") should be gone without any replacement (because the general blockUI message works fine and two are too much).
How can this be done?
<p:dialog id="antragKoopUserSearch" widgetVar="antragKoopUserSearch" height="555" width="830" modal="true" closable="true">
<f:facet name="header">Benutzer suchen zum Weitergeben</f:facet>
<h:form id="modalPanelForm">
<pe:blockUI id="buiModal" widgetVar="buiModal" target="antragKoopUserSearch" />
<p:ajaxStatus id="antragKoopUserSearchStatus" onstart="PF('buiModal').block();" oncomplete="PF('buiModal').unblock();" />
thx
You can hide it like this:
<pe:blockUI css="{opacity: 0}">
asd
</pe:blockUI>
You do need that "asd" there or at least something, otherwise it won't work, at least on my version 6.1.1.

Primefaces 7 doesnt display line break in datatable header

Im running a webapplication JEE /JSF on Jboss 7.3.1. Cause of vulnerability issues we had to upgrade Primefaces 6.2 to 7.0. I doesnt go to 8.x.x cause of too much changes in code and effort to test for now.
Problem as follows : Im using <h:outputText> for display names, sometimes with html inside like <br/>.The linebreak will be displayed correctly for plain use in xhtml, but if that same <h:outputText> is in pf datatable header like this, the linebreak wont be displayed correctly.
<p:column id="#{cc.attrs.cid}actionColumn"
rendered="#{cc.attrs.tableController.actionColumnVisible}"
style="text-align: center; width:#{cc.attrs.tableController.actionColumnWidth.width}px;">
<f:facet name="header">
<!-- to do resource bundle -->
<h:outputText id="#{cc.attrs.cid}actionHeader" value="#{cc.resourceBundleMap.action}" escape="false"/>
</f:facet>
This is the way im building the string to disply :
res.getString("konfiguration.fahrzeugKonfiguration.standard")+"<br/>"+res.getString("konfiguration.fahrzeugKonfiguration.ansageSprache")
Same code leads to :
doesnt breakLine in tableheader
Is that a bug in pf 7.0 or did i do something wrong ? Thanks in advance

Show status on start of pe:exporter and hide status when it is finished

Very similar to Show status on start of p:fileDownload and hide status when it is finished
but in this case I have a datatable that is taking a long time to export, so I need that the pe:exporter show a spinner or a status when the user clicks on the export button and hide it when the export file is send back to the client.
Currently my export button looks like:
<h:commandLink style="float:right;padding:3px;margin-top:2px;" immediate="true"
styleClass="fa fa-file-pdf-o" title="Export to PDF">
<pe:exporter type="pdf" encoding="iso-8859-1" target="datatable"
fileName="ExportResult"/>
</h:commandLink>
I have Primefaces 6.0
Ok I have found a solution.
<h:commandLink style="float:right;padding:3px;margin-top:2px;" immediate="true" styleClass="fa fa-file-pdf-o" title="Export to PDF"
onclick="PrimeFaces.monitorDownload(startHandler, endHandler)">
<pe:exporter type="pdf" encoding="iso-8859-1" target="dataTable"
fileName="resultadoConsulta"/>
</h:commandLink>
Please note the onclick="PrimeFaces.monitorDownload(startHandler, endHandler)" part.
This was the first part of the solution. startHandler and endHandler are javascript functions that shows and hides a spinner, like the ones in the p:fileDownload showcase.
The second part was the tricky one. I have a custom exporter and was missing this line on the response:
externalContext.addResponseCookie(Constants.DOWNLOAD_COOKIE, "true", Collections.<String, Object> emptyMap());
This line of code sets a flag that the monitorDownload function of Primefaces was expecting.
After that, all is working!

Primefaces - Dialog Framework - p:confirm not opening

Primefaces (5.2, Mojarra 2.2.13) inside Dialog Framework is not opening a <p:confirm>-MessageBox.
I have delete icons in a datatable as a <p:commandLink> per row inside a Dialog.
I want to have a user confirmation to delete every row.
Following code works as expected in a <p:dialog> but not using Dialog Framework. Dialog Framework blocks the click on the delete icon or in other words: shows the confirm box invisible and answers NO.
<p:dataTable id="idTblMfc" value="#{bnMfcs.rows}" var="ORow" editable="true" ...>
... Columns ...
<p:column>
<p:commandLink styleClass="ui-icon ui-icon-trash" title="#{msg.TXT_DELETE}" actionListener="#{bnMfcs.doDelete(ORow)}" update="idTblMfc">
<p:confirm header="#{msg.TXT_DELETE}" message="#{msg.PRM_DEL_CONT_MARKED}" icon="ui-icon-alert" />
</p:commandLink>
</p:column>
I tried the same with <p:confirmDialog> instead of <p:confirm> with the same result. OK, I found the tiny difference that <p:confirmDialog> doesn't block the delete icon click but also does not appear.
The rest of the dialog and the datatable works as expected even with message boxen shown with showMessageInDialog(...).
Any ideas?
As you can see in the showcase (http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml), you need both p:confirm (where you need confirmation) and p:confirmDialog (which defines how the dialog looks like).
Also make sure that you are in a h:form tag.
Solution found!
The documentation makes not clear that <p:confirmDialog> is mandatory. I had one on my main page and the page using Dialog Framework had not.

conditionally show Primefaces dialog box

In reference to the query that I have posted
Primefaces Dialog box - show it conditionally. javascript code not working
The problem is that when
<p:outputPanel id="dialogPanel"
rendered="#{not reqSearchHandler.accStatusFlag}">
is not rendered as rendered turns out to be FALSE , then when I click on the commandbutton , its keep on clocking and I am not able to go the next page , it seems that ajax request is never getting completed as oncomplete="dlg3.show()" needs dialog box in the page.As rendered turns out to be false , it never finds dlg3.
<p:commandLink id="addRequest" immediate="true" value="addreq"
oncomplete="dlg3.show()" update="dialogPanel">
<f:setPropertyActionListener
value="#{searchHandler.selectedAccIns}"
target="#{reqSearchHandler.checkAccStatus}" />
</p:commandLink>
Can somebody please help me how to avoid opening dialog box when a particular condition is false. Any Idea?
Is the dlg3 inside of dialogPanel? Why don't you post the complete code?
If so, then just before calling dlg3.show)(), change the rendered condition to true (e.g. by adding action listener) or just move the dialog outside the panel.