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...
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>
Primefaces Migration-Guide 5.3 to 6.0:
ContextMenu: p:contextMenu must be placed AFTER the target component (e.g. datatable) in the xhtml now.
I tried exactly that, but it' not working. No Menu at all.
Placing ContextMenu before dataTable: Menu is showing. Additional output on browser console:
ContextMenu targets a widget which is not available yet. Please place the contextMenu after the target component. targetWidgetVar: widget_base_cars
My Webshpere Liberty log:
...org.primefaces.webapp.PostConstructApplicationEventListener I Running on PrimeFaces 7.0
Java:
java.version = 1.8.0_102
Stripped down to primefaces showcase
<h:body>
<h1>Context Menu</h1>
<h2>ContextMenu: p:contextMenu must be placed AFTER the target component</h2>
<h:form id="base" >
<p:dataTable id="cars" var="car" value="#{dtContextMenuView.cars}" rowKey="#{car.id}" >
<f:facet name="header">
List with #{dtContextMenuView.numberOfCars} Items
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<p:contextMenu for="cars" >
<p:menuitem value="Hello" />
<p:menuitem value="World" />
</p:contextMenu>
<h2>but it fails</h2>
</h:form>
</h:body>
I expect the menu to show on right click.
Is it a bug, or am i the bug?
I reproduced this testing around with PF 5.3/6.0/7.0. I'm with you as long as your p:dataTable is not selectable:
The p:contextMenu appears on rightclick when added above the p:dataTable element in xhtml. When added below, no context menu appears at all. But tbh.: is a context menu useful on a datatable which does not allow selection?
When making it selectable by adding the attributes
selection="#{myBean.selectedValue}" selectionMode="singel"
it behaves like this:
p:contextMenu below p:dataTable as suggested by migration guide: On rightclick, the clicked row is selected and context menu appears on it.
p:contextMenu above p:dataTable: on rightclick, context menu appears either, but the row is not selected.
So if p:contextMenu is added above the table, selection does not work as expected which must be the reason for the migration guide telling "add it below!".
Btw: I did not get that warning in my JavaScript console during my tests, don't know why.
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.
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.