I'm using PF 5.3 on Glassfish 4.1. I need a printer functionality. But I just can not get even this simple example work. Everything else is just working fine. The button and the image from the following example are being rendered, but p:printer is not working. What I'm doing wrong? Could it be a some kind of configuration issue?
<h:body>
<p:graphicImage id="img" value="/resources/img/test/datatable.png" />
<h:form>
<p:commandButton value="Print Image" type="button">
<p:printer target="img" />
</p:commandButton>
</h:form>
</h:body>
You need to have an h:head in your page for javascript resources to be loaded. These are needed for the p:commandButton and p:printer to work.
Related
I have a form with a datatable inside it . In one of the columns is a button to delete that row. That button has a primefaces confirm dialog attached to it.
<h:form id="form" style="text-align: -webkit-center">
<p:dataTable id="preferenceConfigs" var="preferenceConfig"
value="#{preferenceManagementBackingBean.preferenceConfigs}">
<p:column style="width:6rem; text-align: center">
<p:commandButton update=":form"
title="#{msgs['common.delete.userpreference.button']}"
icon="fa fa-trash"
action="#{preferenceManagementBackingBean.invalidatePreferenceConfig(preferenceConfig)}">
<p:confirm header="Confirmation" message="#{msgs['common.dialog.preference.config.warning']}"
icon="fa fa-exclamation-circle" escape="false"/>
</p:commandButton>
</p:dataTable>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" style="text-align-last: center">
<p:commandButton value="#{msgs['common.dialog.confirm.yes']}" type="button"
styleClass="ui-confirmdialog-yes" icon="fa fa-check"/>
<p:commandButton value="#{msgs['common.dialog.confirm.no']}" type="button"
styleClass="ui-confirmdialog-no" icon="fa fa-times"/>
</p:confirmDialog>
</h:form>
Everything works fine until I change the language on the page through a commandLink. They are located in a masterLayout file above this one:
<h:form id="generalSettingsForm">
<ul id="language">
<li><h:commandLink
action="#{languageSessionBean.changeLanguage('en')}" value="EN"
class="blgm_lSwitch" id="EN"/></li>
<li><h:commandLink
action="#{languageSessionBean.changeLanguage('nl')}" value="NL"
class="blgm_lSwitch" id="NL"/></li>
<li><h:commandLink
action="#{languageSessionBean.changeLanguage('fr')}" value="FR"
class="blgm_lSwitch" id="FR"/></li>
</ul>
</h:form>
public void changeLanguage(String language) {
locale = new Locale(language);
findCurrentFacesContext().getViewRoot().setLocale(locale);
}
This refreshes the page and displays the correct language. However pressing the remove button now automatically performs the action without any sign of the confirmation dialog. Only if I open another dialog (that is present in the JSF page) and return, will the confirmation shows its face again...
The dev console gives me the following error:
VM1391 components.js.xhtml:13 Uncaught TypeError: Cannot read property 'style' of undefined
at c.show (VM1391 components.js.xhtml:13)
at c.showMessage (VM1391 components.js.xhtml:13)
at Object.confirm (VM1391 components.js.xhtml:1)
at Object.confirm (VM1390 core.js.xhtml:1)
at HTMLButtonElement.onclick (preferenceManagement.xhtml:58)
Any insight?
Seems that confirmDialog doesn't play well with ajax updating.
Normally a language change means that all the parts of the page must be updated, so there is no benefit in using partial updating.
The easy way to solve it is to set ajax to false on your commandLinks:
<h:commandLink action="#{languageSessionBean.changeLanguage('fr')}"
value="FR" class="blgm_lSwitch" id="FR" ajax="false" />
After some more googling, it seems to be an issue with primefaces 6.2 with the following behaviour:
confirmDialog does not show, an error is logged on console (TypeError:
this.jqEl is undefined)
This was fixed in 6.2.2. I cannot test this myself since all minor releases are for paying users only. As a workaround, I'll try a custom dialog. You can probably also use primefaces 7.0
official github with reproducer
Could you try to put the p:confirmDialog out of the form? Something like this:
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" style="text-align-last: center">
<p:commandButton value="#{msgs['common.dialog.confirm.yes']}" type="button"
styleClass="ui-confirmdialog-yes" icon="fa fa-check"/>
<p:commandButton value="#{msgs['common.dialog.confirm.no']}" type="button"
styleClass="ui-confirmdialog-no" icon="fa fa-times"/>
</p:confirmDialog>
<h:form id="form" style="text-align: -webkit-center">
<p:dataTable id="preferenceConfigs" var="preferenceConfig"
value="#{preferenceManagementBackingBean.preferenceConfigs}">
<p:column style="width:6rem; text-align: center">
<p:commandButton update=":form" icon="fa fa-trash"
title="#{msgs['common.delete.userpreference.button']}"
action="#{preferenceManagementBackingBean.invalidatePreferenceConfig(preferenceConfig)}">
<p:confirm header="Confirmation" message="#{msgs['common.dialog.preference.config.warning']}"
icon="fa fa-exclamation-circle" escape="false"/>
</p:commandButton>
</p:dataTable>
</h:form>
Using the version primefaces 6.2 the same thing happened to me, then searching hard I found this solution that worked perfectly, I hope it helps someone, in the web xml add:
<context-param>
<param-name>primefaces.MOVE_SCRIPTS_TO_BOTTOM</param-name>
<param-value>true</param-value>
</context-param>
I just upgraded to JSF 2.3 & Wildfly 14 (from 2.0 and 13) and primefaces 6.2.5.
I noticed a strange behavior when i use a command button. I have 2 forms and when a push the button of the first form, the input of the second form is validated and the error (in this case required errors) are displayed in a p:message :
<h:form id="form1" prependId="false">
<p:commandButton id="save" value="Save" actionListener="#{myBean.save()}" update="#form">
<f:actionListener binding="#{myBean.reloadResults()}" />
</p:commandButton>
<p:messages id="msgs" severity="error,warn" escape="false">
<p:autoUpdate />
</p:messages>
...
</h:form>
<p:dialog >
<h:form id="form2" >
<p:messages severity="error,warn" escape="false">
<p:autoUpdate />
</p:messages>
<div>
<p:calendar id="myDate" value="#{myBean.myDate}" required="true" />
</div>
...
</h:form>
</p:dialog>
I was expecting only the content of the first form to be processed and validated. This was the case with wildfly 13 and jsf 2.0.
Any idea?
You have not specified attribute process in your command button. Default value of this is #all which will validate all Forms.
Please use process="#form" to avoid validation and process of other form.
Updated code is as below:
<p:commandButton id="save" value="Save" actionListener="#{myBean.save()}" update="#form" process="#form">
<f:actionListener binding="#{myBean.reloadResults()}" />
</p:commandButton>
I have to apologize for not posting the entire code but it would have been to big. I found out what the problem was. It's related to this bug:
https://github.com/primefaces/primefaces/issues/4122
I have a panelgrid of 4 columns but with 10 elements in it.
The whole ajax communication was then broken. Fix is coming in PF 6.3
Have the following issue: there is p:remoteCommand that lazy loads p:dataTable after page load, but the load indicator of "p:ajaxStatus" is not shown during the time of the ajax request...
How to make "p:ajaxStatus" to be shown on the page when p:remoteCommand sends request for lazy loading of the data?
Code on the page:
<h:form id="form">
<p:remoteCommand name="loadLazyData" action="#{crmBackingBean.crmOnControlLazyInit}" autoRun="true" process="#this" update="dtCrmOnControl" />
<p:dataTable id="dtCrmOnControl" var="rowData" value="#{crmBackingBean.crmOnControlLazy}" widgetVar="dtCrmOnControl" rows="#{crmBackingBean.crmDTonControlRows}" paginator="true" ..... lazy="true" >
.......................................................
</p:dataTable>
</h:form>
I use Atlas theme, p:ajaxStatus is located in its original place, in template.xhtml:
<p:ajaxStatus style="width:40px; height:40px; position:fixed; right:30px; bottom:30px; z-index:999999;">
<f:facet name="start">
<i class="fa fa-circle-o-notch fa-spin Green Fs40"></i>
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
Thank you!
Versions: PrimeFaces 6.0.2; PrimeFaces Atlas Theme 1.1.1; GlassFish 4.1.1 with JSF 2.2.12 (Mojarra)
The solutions is following:
The tag <p:ajaxStatus> should be placed on the xhtml source page BEFORE tag <p:remoteCommand>.
Environment:
PrimeFaces 6.0.2
PrimeFaces Atlas Theme 1.1.1
GlassFish 4.1.1 with JSF 2.2.12 (Mojarra)
it seems like you've missed a few essential defintions. How should your status notice that there is any action going on? Also, I suppose you'd like to display a dialog during waiting and configure its styling in ajaxStatus, is that correct?
If so, I recommend you to create an own dialog by <p:dialog> and add the onstart and onsuccess attributes to your ajaxStatus as described in Primefaces showcase: http://www.primefaces.org/showcase/ui/ajax/status.xhtml
It will be something like
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
<p:graphicImage name="waiting_picture.gif" />
</p:dialog>
You can easily combine this solution with a datatable / paginator.
I hope this helps!
EDIT: Why don't you define the rows per page to support lazy loading?
http://www.primefaces.org/showcase/ui/data/datatable/paginator.xhtml
EDIT 2: You can also call your loadLazyData method on start:
<p:ajaxStatus onstart="loadLazyData" />
or something like this...
I can't seem to make p:sticky work inside a p:dialog :
my dialog xhtml :
<p:dialog modal="true" height="490" width="700" resizable="false" >
<h:form id="form">
<p:toolbar id="tb">
<p:toolbarGroup align="right">
<p:commandButton value="save" />
</p:toolbarGroup>
</p:toolbar>
<p:sticky target="form:tb" />
</h:form>
</p:dialog>
It works fine from a simple page. any thoughts?
You are not doing anything wrong, it is just not supported. And due to a 'bad' issue report, it is closed as invalid http://code.google.com/p/primefaces/issues/detail?id=6341
Looking at the javascript source code of the sticky component, it checks scrolling of the window and not any other part inside it. So there is a big chance it will also fail in e.g. a p:layout.
I want to show a dialog box on the click of a primefaces commandbutton. Before the dialog box , I need to check a condtional.
I am using Spring web-flow 2.3.0.
So I am doing it like this ,
And the Dialog Box is
I am not able to show this dialog box based on this condition.
Please help me ,any pointers?
SWF 2.3.0 Primefaces 2.2.1 JSF 2 Spring Security 3 Spring 3.1.0M1I EhCache Apache Tomcat 6.0 STS 2.5.1
So I have changed my code as per below
<p:commandLink id="addRequest" immediate="true" value="addreq"
oncomplete="dlg3.show()" update="dialogPanel">
<f:setPropertyActionListener
value="#{searchHandler.selectedAccIns}"
target="#{reqSearchHandler.checkAccStatus}" />
</p:commandLink>
And the dialog box is
<p:outputPanel id="dialogPanel"
rendered="#{not reqSearchHandler.accStatusFlag}">
<p:dialog header="Effect Dialog" widgetVar="dlg3"
showEffect="bounce" hideEffect="explode" height="200">
<h:outputText
value="Account is #{searchHandler.selectedAccIns.accStatusDesc}" />
<h:outputText value="Do you want to continue?" />
<div align="left">
<p:commandButton value="Yes" action="accept" />
<p:spacer width="960" height="5" />
<p:commandButton value="No" action="cancel" />
</div>
</p:dialog>
</p:outputPanel>
But when I am clicking on the command link , I am getting 3 dialog boxes. Can you please tell me why it is so?
Somebody else just posted the same problem! :)
You should use the oncomplete attribute instead of onclick of the commandButton. The click javascript event occurs before the page posts back, likely causing your dialog not to appear because of the page reloading.
oncomplete="dlg3.show()" will display the dialog AFTER the postback.