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.
Related
I working with primefaces 6.2 on JavaEE 8 .
I have a basic dialog with a commandbutton created a modal over that .(Sory for bad english !)
I want to close modal without closing basic dialog .
How can fix this problem ?
<p:dialog header="Basic Dialog" id="user-management" widgetVar="user-management" width="700px" height="300px" resizable="false">
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Add" icon="ui-icon-plus" onclick="PF('userDialog').show();"/>
</f:facet>
</p:toolbar>
<p:spacer/>
<p:dataTable value="#{userGroupBean.userSet}" var="user">
// Show user information
</p:dataTable>
</p:dialog>
<p:dialog header="User"
widgetVar="userDialog"
closeOnEscape="true"
resizable="true"
modal="true"
showEffect="fade"
hideEffect="fade"
height="auto"
width="auto">
<h:panelGrid columns="2">
// Some inputs ...
</h:panelGrid>
<p:spacer/>
<div class="dialog-footer">
<p:commandButton value="Save"
oncomplete="PF('userDialog').hide();"
process="#form"
update="user-management"
action="#{userGroupBean.save}"/>
</div>
</p:dialog>
The basic dialog is not 'closed' it is updated via update="user-management" and hence the html that is returned from the server is put in the html dom in with the dialog in the default state: closed. You have several options:
Don't update the dialog but update it's contents (my prefered solution) by adding e.g. a panel inside it and update that
Set a flag in a beanand use visible="#{mybean.dialogIsVisibleFlag}"
in the oncomplete of the ajax call do a PF('user-management').show()
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
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 have encountered a problem with updating a dialog in a tabview ui:include page:
I have my page:
<p:tabView id="tabView" widgetVar="tabViewMain" >
<p:tab title="P1" >
<ui:include src="page1.xhtml"/>
</p:tab>
<p:tab title="p2">
<ui:include src="page2.xhtml"/>
</p:tab>
</p:tabView>
In page 2 I have a dataTable with:
the onDbClickByElement method try to do instruction and then show a dialog
<p:dialog closeOnEscape="true" id="editEtudeInListIdByElement"
header="Traitement de Lot #{infoGeneralesManagedBean.selectedElemetRadio.lot} selectionné" widgetVar="editEtudeInListByElement"
width="700" height="100%">
<h:form id="editEtudeInListformByElement">
</h:form>
</p:dialog>
The problem comes when i tried to update the dialog as follows:
<p:ajax event="rowDblselect" listener="#{infoGeneralesManagedBean.onDbClickByElement}"
update=":tabView:t:editEtudeInListIdByElement" />
Where i got this error :Cannot find component with expression
":tabView:t:editEtudeInListIdByElement" referenced from
"tabView:t:listInjection".
I always update my dialog like this and it's okay but now I don''t know what happens with the code!
Can I have any help how to correctly do the update of the dialog from a tabView
try
<p:ajax event="rowDblselect" listener="#{infoGeneralesManagedBean.onDbClickByElement}"
update=":tabView:editEtudeInListIdByElement" />
If it still fails, try to open your browser developer's tool and locate your "editEtudeInListIdByElement" element. You could try to use the id of that element. (:tabView:xxxx)
I am using primefaces 1.1 + JSF 1.2 running in JBoss 5.1
I have a problem with p:dialog
Below are the code snippets taken from the showcase(of PF 2.2, yet the p:dialog code remains the same. Right?? ) which can be seen # http://www.primefaces.org/showcase/ui/dialog.jsf
Code:
<h:panelGrid cellpadding="5">
<p:commandButton value="Basic Dialog" onclick="dlg1.show()" type="button"/>
<p:commandButton value="Modal" onclick="dlg2.show();" type="button"/>
<p:commandButton value="Effects" onclick="dlg3.show();" type="button"/>
</h:panelGrid>
<p:dialog header="Basic Dialog" widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="200">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:dialog header="Effect Dialog" widgetVar="dlg3" showEffect="bounce" hideEffect="explode" height="200">
<h:outputText value="This dialog has cool effects." />
</p:dialog>
The thing is, the outputText values within the dialog boxes are displayed along with the commandbuttons like the ordinady html contents rather than displayed inside a dialog box only when the commandButtons are clicked. What might be the issue? :shock:
P.S : The above code runs fine in Primefaces 2.2 + Jsf 2.0 + JBoss 6
SCREENSHOT -
problem image url