I have encountered a strange situation.
I have a xhtml looks like this:
<h:form id="frmContent">
<p:dataTable id="tbl" ..>
</p:dataTable>
<p:contextMenu for="tbl">
<p:menuitem value="Delete" update="tbl" actionListener="#{VehicleBean.deleteVehicle}"/>
<p:menuitem value="Copy" update=":frmContent:vehicleDia:VehicleDialogContent" action="#{VehicleBean.copyVehicle}" oncomplete="PF('VehicleDialog').show();"/>
</p:contextMenu>
<p:dialog header="Vehicle Detail" widgetVar="VehicleDialog" modal="true" resizable="true" appendTo="#(body)">
<h:form id="vehicleDia">
<p:panelGrid id="VehicleDialogContent" columns="2" >
...
</p:panelGrid>
<p:commandButton id="SaveButton" type="button" value="Save" update="VehicleDialogContent" actionListener="#{VehicleBean.saveVehicle}" oncomplete="PF('VehicleDialog').hide();">
</h:form>
</p:dialog>
The problem is, I cannot make the VehicleBean.saveVehicle() method fired.
I have tried to remove the nested form "vehicleDia" but not work.
I have tried to changing actionListener to action but still not work.
I have tired using h:commandButton instead of p:commandButton still no lucky.
Right now, I dont have any clue.
PS: this is my bean:
#ManagedBean(name="VehicleBean")
#ViewScoped
public class VehicleBean {
...
public void saveVehicle() {
System.out.println("VehicleBean:saveVehcile is called");
}
}
I am new to JSF and primefaces, any help is much appreciated!!
Related
I want to create edit form for Primefaces table. I tested this code:
<h:form id="form">
<p:dataTable id="tbl" var="systemuser" value="#{systemusers.systemUsers}"
selectionMode="single" selection="#{systemusers.selectedSystemUser}" rowKey="#{systemuser.username}" lazy="true"
resizableColumns="true"
>
<p:ajax event="rowSelect" listener="#{systemusers.onRowSelect}" update=":form:carDetail" oncomplete="PF('carDialog').show()" />
....................
</p:dataTable>
<p:dialog id="wd" header="System User Details" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputLabel for="id" value="ID" />
<p:outputLabel id="id" value="#{systemusers.selectedSystemUser.id}" rendered="#{not systemusers.editable}"/>
<h:inputText value="#{systemusers.selectedSystemUser.id}" rendered="#{systemusers.editable}" />
........
</p:panelGrid>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton value="Edit System User" rendered="#{not systemusers.editable}"
actionListener="#{systemusers.editRecord(false)}">
<f:ajax render=":form:wd" execute=":form:wd"></f:ajax>
</p:commandButton>
<p:commandButton value="Cancel" rendered="#{systemusers.editable}" actionListener="#{systemusers.editRecord(true)}">
<f:ajax render=":form" execute=":form"></f:ajax>
</p:commandButton>
</f:facet>
</p:dialog>
<p:contextMenu for="tbl">
<p:menuitem value="View" update="carDetail" icon="fa fa-search" oncomplete="PF('carDialog').show()"/>
<p:menuitem value="Delete" update="tbl" icon="fa fa-remove" actionListener="#{systemusers.deleteSystemUser}">
<p:confirm header="Confirmation" message="Are you sure?" icon="fa fa-warning" />
</p:menuitem>
</p:contextMenu>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="fa fa-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="fa fa-remove" />
</p:confirmDialog>
</h:form>
Managed bean:
#Named
#RequestScoped
public class Systemusers implements Serializable
{
.......
public void editRecord(boolean editable)
{
SessionFactory factory = HibernateUtils.getSessionFactory();
Session session = factory.getCurrentSession();
try
{
session.getTransaction().begin();
SystemUsersModel obj = new SystemUsersModel();
obj.setId(selectedSystemUser.getId());
..........
session.update(obj);
session.getTransaction().commit();
this.editable = editable;
}
catch (Exception e)
{
e.printStackTrace();
session.getTransaction().rollback();
}
}
......
private boolean editable = false;
public boolean isEditable()
{
return editable;
}
public void setEditable(boolean editable)
{
this.editable = editable;
}
}
When I open the Edit form and I click button Edit System User the form disappears. Probably because I render and execute it. How I can execute the form and under it without closing it?
The example code is bad in multiple ways. Two things stand out:
It is not an [mcve]
<f:ajax render=":form" execute=":form"> is superfluous or might even cause the weird behaviour
OP most likely does not know that (quote from the PrimeFaces showcase , emphasis mine)
CommandButton
CommandButton extends the standard h:commandButton with ajax, partial processing and skinning features.
So the commandBotton is already ajax anabled and does not need to hava a
<f:ajax render=":form" execute=":form">
inside it. This (most likely) makes an the update run twice. One #none (Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes) and one updating the form. The second one most likely does not have any content. But trying (and debugging) will make things clear. If this is not the answer, the reason cannot be seen in the code and hence it should have been a [mcve]
I've got a problem as described in the title.
Small description of the problem is as following:
I have button which is used to open dialog. Then, inside that dialog, there is button which opens another dialog on top of the first one. After clicking second button I want method from controller to be called but nothing happens. Value in h:outputText is read properly, so I guess it is not a problem with connection controller->view.
I'm using:
Spring web 3.1.2.RELEASE
JSF 2.2.10
Primefaces 5.1
Code:
beans.xml
<bean id="testController" class="test.TestController" />
TestController.java
public class TestController implements Serializable
{
private static final long serialVersionUID = 7028608421091861830L;
private String test;
public TestController()
{
test = "abc";
}
public void testMethod()
{
test = "cba";
}
public String getTest()
{
return test;
}
}
test.xhtml
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />
</h:panelGrid>
<p:dialog widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton value="Basic" type="button" onclick="PF('dlg2').show();" />
</h:panelGrid>
<p:dialog widgetVar="dlg2">
<h:outputText value="#{testController.test}" />
<p:commandButton value="Call method" type="button" actionListener="#{testController.testMethod}" />
</p:dialog>
</p:dialog>
What I tried:
adding appendToBody="true" to each p:dialog
changing from p:commandButton to p:button
changing from actionListener to action
but nothing helps.
I would be grateful for any help or advice of what can be the reason of not calling given method.
There are 3 problems.
You're nesting <p:dialog> components. This doesn't make sense. Separate them.
A <p:dialog> must have its own <h:form>, particularly when you explicitly use appendToBody="true" or appendTo="#(body)", otherwise nothing can be submitted because JavaScript would relocate the dialog out of its position in the HTML DOM tree to the end of body, causing it to not be sitting in a form anymore.
A <p:commandButton type="button"> acts as a "click" button, not as a submit button. Remove that attribute from submit buttons.
All in all, this is how it should look like:
<h:form>
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />
</h:panelGrid>
</h:form>
<p:dialog widgetVar="dlg1">
<h:form>
<h:outputText value="Resistance to PrimeFaces is futile!" />
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton value="Basic" type="button" onclick="PF('dlg2').show();" />
</h:panelGrid>
</h:form>
</p:dialog>
<p:dialog widgetVar="dlg2">
<h:form>
<h:outputText value="#{testController.test}" />
<p:commandButton value="Call method" actionListener="#{testController.testMethod}" />
</h:form>
</p:dialog>
OK. I guess I found a way to fix this problem.
It seems that the problem was:
type="button"
I deleted it from the list of attributes of each button and now it works even without h:form. Thanks for help.
I'm trying to update message by clicking button from backing bean and in the same time after clicking button I'm trying to block this button to avoid doubleclick. Blocking occurs successfully and message appears, but after the unblocking message disappears. This happens pretty quickly. And I want the message in growl stay longer.
My .jsf snippet.
<h:form id="form">
<p:growl id="messages" />
<p:blockUI block="button" widgetVar="block"/>
<p:dataTable var="item" id="table" value="#{bean.lazyModel}"
lazy="true">
<p:column>
<p:commandButton value="#{item.actionBtn}"
update=":form:messages" action="#{bean.action}"
oncomplete="filterTableFromPanel();PF('block').hide()"
onclick="PF('block').show()">
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
In backing bean all just as usual.
public void action(){
FacesContext.getCurrentInstance().addMessage(null, msg);
}
Please, forgive me for possible mistakes, snipet is trimmed.
You have the option of setting the sticky or life:
sticky to keep the growl to stay visible until the user closes the growl component manually
life to set a timeout period for the component. This value will determine how long the message is visible for, and then it disappears after the life elapses. Set this value in milliseconds life="1200" (default is 6000)
I've resolved my problem using p:remoteCommand.
<h:form id="form">
<p:growl id="messages" />
<p:blockUI block="button" widgetVar="block"/>
<p:remoteCommand name="addMessage"
action="#{bean.addMessage}"
update=":form:messages" />
<p:dataTable var="item" id="table" value="#{bean.lazyModel}"
lazy="true">
<p:column>
<p:commandButton value="#{item.actionBtn}"
update=":form:messages" action="#{bean.action}"
oncomplete="filterTableFromPanel();PF('block').hide(); addMessage()"
onclick="PF('block').show()">
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
In backing bean I've add somethhing like this:
public void addMessage(){
FacesContext.getCurrentInstance().addMessage(null, "msg");
}
My dataTable is populated by an ajax call, my commandLink (in the datataable) is not pointing to the correct location and always render the same page.and show me in the console :
HtmlLabelRend W Attribute 'for' of label component with id j_id1471051656_3ffdbef6:j_id1471051656_3ffdbfc6 is not defined
But when I put the commandlink outside the datatable the action method works fine.
This problem is rare!, How Can I solve it?
Thanks in advance.
My Jsf Page:
<h:form>
<p:panel header="Busqueda">
<p:panelGrid style="width:100%;">
<p:row>
-----------------------------------(inputs)---------------------------------------
<p:column>
<p:commandButton value="Buscar" update="grilla"
action="#{devolucionAdminController.buscarSD()}">´
</p:commandButton>
</p:column>
</p:row>
</p:panelGrid>
<p:messages closable="true" redisplay="true" id="msj"></p:messages>
</p:panel>
<p:dataTable id="grilla" var="r"
value="#{devolucionAdminController.listado}"
emptyMessage="No se han encontrado solicitudes de devolución">
<p:column headerText="Sec">
<h:outputText value="#{r.idSoliDevo}" />
</p:column>
<p:column headerText="Cuenta">
<h:outputText value="#{r.cuentaId}" />
</p:column>
<p:column headerText="Ver Detalle Sol. Dev ">
<p:commandLink
action="#{bajaController.mostrarSolicitudBaja(r.cuentaId,r.idSoliDevo)}" ajax="false">
<p:commandButton icon="ui-icon-search" title="Ver Detalle" />
</p:commandLink>
</p:column>
</p:dataTable>
<!--works fine -->
<p:commandLink action="#{bajaController.mostrarSolicitudBaja(80003,340)}"
ajax="false">
<p:commandButton icon="ui-icon-search" title="Ver Detalle" />
</p:commandLink>
</h:form>
My first Managed Bean:
#ManagedBean
#RequestScoped
public class DevolucionAdminController {
List<TaSoliDevo> listado;
//getters and setters
........................
public void buscarSD() {
.............................
}
My second Managed Bean:
#ManagedBean
#RequestScoped
public class BajaController {
public String mostrarSolicitudBaja(long cuentaId, long solicDevId) {
.........................
return "goResult";
}}
Use process="#this" and use actionListener instead of action
<p:commandLink process="#this" actionListener="#{bajaController.mostrarSolicitudBaja(80003,340)}"></p:commandLink>
I had the same problem and I was struggling to find a solution but nothing worked for me. Here is how I finally solved the problem :
I removed the ajax attribute
I added process="#this"
Here is what my commandLink looks like after the changes :
<p:commandLink process="#this" action="#{projsSummaryBacking.redirectProjTasks(proj)}" >
<h:outputText value="#{proj.title}" />
</p:commandLink>
I hope that this can help someone. /m\
remove the ajax="false" tag, its work for me
replace your commandLink with
<p:commandButton icon="ui-icon-search" title="Ver Detalle"
action="#{bajaController.mostrarSolicitudBaja(r.cuentaId,r.idSoliDevo)}" ajax="false"/>
Really no need to put a command button inside a command Link, just to put an icon
I am trying to move a p:dialog out of a h:form, because I have read that this is the preferred way (however I'd like to understand the reason, because my p:dialog inside a form works well in my application).
The only difficulty is that the dialog title needs to be updated dynamically. The dialog is shown when a button in a p:dataTable is clicked.
Here is my old xhtml (before the changes), that's working fine:
<p:dataTable var="event" value="#{eventBean.lazyModel}" selection="#{eventBean.selectedEvent}" />
...
<p:column headerText="#{msgs.Persons}">
<p:commandButton value="#{msgs.ViewPersons}" update=":viewPersonsForm" oncomplete="viewPersonsDlg.show()">
<f:setPropertyActionListener value="#{event}" target="#{eventBean.selectedEvent}" />
</p:commandButton>
</p:column>
</p:dataTable>
<h:form id="viewPersonsForm">
<p:dialog modal="true" widgetVar="viewPersonsDlg" dynamic="true" header="#{eventBean.selectedEvent.name}" >
...
</p:dialog>
</h:form>
And here is the new xhtml, with eventBean#setSelectedEvent() that is not invoked.
<p:dataTable var="event" value="#{eventBean.lazyModel}" selection="#{eventBean.selectedEvent}" />
...
<p:column headerText="#{msgs.Persons}">
<p:commandButton value="#{msgs.ViewPersons}" update=":viewPersonsDlgId" oncomplete="jQuery('#viewPersonsDlgId .ui-dialog-title').text('#{eventBean.selectedEvent.name}');viewPersonsDlg.show()">
<f:setPropertyActionListener value="#{event}" target="#{eventBean.selectedEvent}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog modal="true" id="viewPersonsDlgId" widgetVar="viewPersonsDlg" dynamic="true" >
...
</p:dialog>
So, again, why in the second scenario eventBean#setSelectedEvent() is not invoked? And, if possible, why the first scenario is not optimal?
It is not restricted to use p:dialog inside a h:form since it can work in some cases, but most of the time you will find yourself struggling with some unexpected behaviour with that, here are some explanations :
Why not to place p:dialog inside h:form 1
Why not to place p:dialog inside h:form 2
The problem in your case is that jQuery method in oncomplete is called before the value is set with f:setPropertyActionListener. To avoid this use the same solution as you used in your first case. So :
<p:dataTable var="event" value="#{eventBean.lazyModel}" selection="#{eventBean.selectedEvent}" />
...
<p:column headerText="#{msgs.Persons}">
<p:commandButton value="#{msgs.ViewPersons}" update=":viewPersonsDlgId" oncomplete="viewPersonsDlg.show()">
<f:setPropertyActionListener value="#{event}" target="#{eventBean.selectedEvent}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog modal="true" id="viewPersonsDlgId" widgetVar="viewPersonsDlg" dynamic="true" header="#{eventBean.selectedEvent.name}" >
...
</p:dialog>
No need to use jQuery here.
I had the same problem (pf 3.5):
<p:tabView id="cashFlowTabContainer" style="width:100%" activeIndex="0"
widgetVar="cashFlowTabContainerVar">
<p:tab title="#{labels['cashflow_incoming']}">
<p:outputPanel id="incomingPanel">
<p:dataTable value="#{cashFlowController.incomingCashFlows}"
var="cashFlow">
<p:column headerText="#{labels.cashflow_actions}">
<p:commandButton value="Edit"
action="# {cashFlowController.editIncoming}" update="#form" oncomplete="editInputVar.show();">
<f:setPropertyActionListener value="#{cashFlow}"
target="#{cashFlowController.selectedIncoming}" />
</p:commandButton>
</p:column>
and this was my dialog:
<p:dialog id="editInput" header="Dynamic Dialog"
widgetVar="editInputVar" resizable="false" draggable="false"
modal="true">
<p:panel>
<h:panelGrid columns="2" cellpadding="5">
...
<h:outputText value="#{labels.cashflow_description}:" />
<h:inputText
value="#{cashFlowController.selectedIncoming.description}" />
So... This way the setter was NEVER called. Then I noticed that if I emptied the dialog the setter was called.
So I solved it by putting a "rendered" statement on the panel:
<p:dialog id="editInput" header="Dynamic Dialog"
widgetVar="editInputVar" resizable="false" draggable="false"
modal="true">
<p:panel **rendered="#{cashFlowController.selectedIncoming != null}"**>
<h:panelGrid columns="2" cellpadding="5">
I guess there's a null pointer that is not logged anywhere... anyway this way it works :)