Primefaces Extensions BlockUI in Dialog - primefaces

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.

Related

PrimeFaces Extensions Gchart is not working properly

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.

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.

Primefaces removing uploaded file

I am using the following code to remove the file uploaded using primefaces.
<p:column width="35" headerText="Delete" style="text-align:center">
<h:commandLink ajax="true" update="#form" title="Delete Document"
process="#form" action="#{learningGuaranteeBean.deleteDocument()}"
disabled="#{(learningGuaranteeBean.activeEntry.statusCode ne 3) and (learningGuaranteeBean.activeEntry.statusCode ne null)}">
<f:setPropertyActionListener
target="#{learningGuaranteeBean.selectedDocument}"
value="#{doc}"></f:setPropertyActionListener>
<h:graphicImage value="../images/icons/delete.gif"></h:graphicImage>
</h:commandLink>
</p:column>
But what happens is, when I delete a attached file, the entire jsf page is reloaded, so the data which are entered in the input fields disappear when I remove the attached file. Could anyone assist me to prevent this please?
You seem to be using h:commandLink instead of p:commandLink by mistake. Since h:commandLink doesn't even have the process, update, ajax attributes, this results in a non-AJAX submit, hence the page reload.
Use p:commandLink.
If you need h:commandLink for some reason, then substitute the erroneous attributes for a proper f:ajax tag.

PF - chart selectItem -> dialog

I'm playing with interactive chart by this topic:
enter link description here
Problem is, that I'm not able to show nothing else than Growl component.
The p:dialog hasn't been displayed:
<p:dialog id="dlg" header="TEST"/>
<p:chart type="bar" model="#{chartView.barModel}" widgetVar="chart">
<p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="dlg" />
</p:chart>
I've also tried (instead of update attribute):
onComplete="PF('dlg').show();"
onComplete="PF('#form\\:dlg').show();"
onclick="PF('dlg').show();"
onclick="PF('#form\\:dlg').show();"
How can I show for example dialog box with som sub-chart related to selected item?
To display the dialog box use something like this.
<p:dialog id="basicDialog" widgetVar="dlg" header="TEST" />
then call display the dialog as.
oncomplete="PF('dlg').show();"
No need to update the dialog tag.

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.