Suppose having a p:dialog with an <o:validateOne> on submit button where p:dialog will close after that the dialog closes even if the validation is still required
<h:form>
<h:outputText id="newValueId" value="#{myBean.newValue}/>
<p:dialog id="dialog" widgetVar="dlg" resizable="false" dynamic="true"
appendToBody="false" modal="true">
<o:validateOne id="one" components="name1 name2"
message="one is required"/>
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel value="name 1 :" />
<p:inputText value="#{myBean.name1}" id="name1"/>
<h:outputLabel fvalue="name 2 :" />
<p:inputText value="#{myBean.name2}" id="name2"/>
<p:commandLink id="okId" value="ok" update="growl newValueId"
action="#{myBean.updateMyForm}"
process="dialog"
oncomplete="if(!args.validationFailed())dlg.hide();"/>
</h:panelGrid>
</p:dialog>
class Mybean{
String name1,name2,newValue;
public void updateMyForm(){
newValue=name1 + " " + name2;
}
//getter and setters
}
I want the dialog to not close if the two inputs input1 and input2 are still empty
But what what's happening is that dialog is closed and message is the displayed in the growl
Related
This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
How to display dialog only on complete of a successful form submit
(1 answer)
How to call JSF backing bean method only when onclick/oncomplete/on... event occurs and not on page load
(1 answer)
Closed 2 years ago.
I am trying to submit the contents of a form to a method in a managed bean, storeAppointment(), however the action attribute of the commandButton is never fired. If i use the onclick attribute, then the method in the managed bean is called, however, the onclick attribute also fires when the page is loaded which is not what I want to happen. My form is as follows :
<h:form>
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true">
<p:autoUpdate />
</p:growl>
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="start" value="Start Time" />
<p:datePicker id="start" value="#{createAppCtrl.startTime}" showTime="true" stepMinute="5"/>
<p:outputLabel for="finish" value="Finish Time" />
<p:datePicker id="finish" value="#{createAppCtrl.finishTime}" showTime="true" stepMinute="5"/>
<h:outputLabel for="multiple" value="Multiple:" />
<p:selectCheckboxMenu id="multiple" value="#{createAppCtrl.selectedUsers}" label="Users" multiple="true"
filter="true" filterMatchMode="startsWith" panelStyle="width:250px">
<p:ajax event="itemUnselect" listener="#{createAppCtrl.onItemUnselect}" />
<f:selectItems value="#{createAppCtrl.involvement}" />
</p:selectCheckboxMenu>
</h:panelGrid>
<p:commandButton value="Submit"
action="#{createAppCtrl.storeAppointment}"
update="displayItems"
oncomplete="PF('itemDialog').show()"/>
<p:dialog header="Selected Items" modal="true" showEffect="fade" hideEffect="fade" widgetVar="itemDialog" width="250">
<p:outputPanel id="displayItems">
<h:outputText value="Time: " />
<h:outputText value="#{createAppCtrl.startTime}" >
<f:convertDateTime pattern="MM/dd/yyyy HH:mm" />
</h:outputText>
<h:outputText value="Time: " />
<h:outputText value="#{createAppCtrl.finishTime}">
<f:convertDateTime pattern="MM/dd/yyyy HH:mm" />
</h:outputText>
<p:dataList value="#{createAppCtrl.selectedUsers}" var="city" emptyMessage="No cities selected" style="margin-bottom: 10px;">
<f:facet name="header">
Multiple
</f:facet>
#{city}
</p:dataList>
</p:outputPanel>
</p:dialog>
</h:form>
When the commandButton is clicked the update and oncomplete attributes work as expected, but the dialog that is shown by oncomplete displays only null values.
And the method that is being called by action is #{createAppCtrl.storeAppointment}:
public String storeAppointment() {
try {
System.out.print(startTime + " " + finishTime + " " + involvement);
appointmentBean.createAppointment(startTime, finishTime, involvement);
return "";
} catch (Exception e) {
System.out.print("Ctrl: " + e);
return "";
}
}
I am having a problem with not closing a PrimeFaces dialog. The input field 'username' is required:
<p:outputLabel for="username" value="Username: "/>
<p:inputText id="username"
value="#{employeeController.employee.username}" required="true"/>
I used the following code to prevent the dialog from closing if the field is empty:
<p:commandButton value="Save" action="{employeeController.doSaveEmployee()}"
oncomplete="if (args && !args.validationFailed) PF('employeeAddDialog').hide()"
update=":employeeForm"/>
But the dialog still closes whenever I click on 'Save' no matter if 'username' is filled or not. When I open the dialog again after closing the error message is displayed, so I know that the input validation works.
EDIT:
<p:dialog header="Create Employee" id="employeeAddDialog" widgetVar="employeeAddDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="employeeDataCreate">
<h:panelGrid columns="2">
<p:outputLabel for="username" value="Username: " />
<p:inputText id="username" value="#{employeeController.employee.username}" required="true" />
<p:outputLabel for="password" value="Password: " />
<p:password id="password" value="#{employeeController.employee.password}" />
</h:panelGrid>
<h:panelGrid columns="3">
<p:commandButton value="Save" action="#{employeeController.doSaveEmployee()}" oncomplete="if (args && !args.validationFailed) PF('employeeAddDialog').hide()" update=":employeeForm" />
<p:commandButton value="Abort" oncomplete="PF('employeeAddDialog').hide()" />
</h:panelGrid>
</p:outputPanel>
</p:dialog>
Here is some more code. What else could be the cause for this problem?
employeeForm is just a dataTable that lists employees with their corresponding attributes.
EDIT2:
This code in EmployeeController yields the wanted behavior, but only if I remove update=":employeeForm" from the 'Save'-button
public void doSaveEmployee() {
employee = employeeService.saveEmployee(employee);
employee = null;
initNewEmployee();
initList();
RequestContext context = RequestContext.getCurrentInstance();
context.execute("PF('employeeAddDialog').hide();");
}
FINAL EDIT:
My dialog was closing because I updated the whole form. Changing update=":employeeForm" to update=":employeeForm:employeeTable" made things work like intended.
not sure why you are using oncomplete="args & amp; & amp; ...". I have never used that and works great.
oncomplete="if (args && !args.validationFailed) PF('employeeAddDialog').hide()"
I use it like:
oncomplete="if (!args.validationFailed) PF('employeeAddDialog').hide()"
is this a question error?
i suggest make close operaction in employeeController.doSaveEmployee() after succes save action
RequestContext context = RequestContext.getCurrentInstance();
context.execute("PF('myDialogVar').hide();");
In Primefaces, a button will call a prepareCreate method and then open the form dialog. The issue is, this method never get called so that the form in the dialog is not shown.
Command button
<p:commandButton id="createButton1" value="#{bundle.Create}" actionListener="#{purchaseOrderController.prepareCreate}"
update=":PurchaseOrderCreateForm11" oncomplete="PF('PurchaseOrderCreateDialog11').show()"/>
Dialog
<p:dialog id="PurchaseOrderCreateDlg11" widgetVar="PurchaseOrderCreateDialog11" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.CreatePurchaseOrderTitle}">
<h:form id="PurchaseOrderCreateForm11">
<h:panelGroup id="display">
<p:panelGrid columns="2" rendered="#{purchaseOrderController.selected != null}">
<p:outputLabel value="#{bundle.CreatePurchaseOrderLabel_orderNum}" for="orderNum" />
<p:inputText id="orderNum" value="#{purchaseOrderController.selected.orderNum}" title="#{bundle.CreatePurchaseOrderTitle_orderNum}" required="true" requiredMessage="#{bundle.CreatePurchaseOrderRequiredMessage_orderNum}"/>
<p:outputLabel value="#{bundle.CreatePurchaseOrderLabel_quantity}" for="quantity" />
<p:inputText id="quantity" value="#{purchaseOrderController.selected.quantity}" title="#{bundle.CreatePurchaseOrderTitle_quantity}" />
<p:outputLabel value="#{bundle.CreatePurchaseOrderLabel_shippingCost}" for="shippingCost" />
<p:inputText id="shippingCost" value="#{purchaseOrderController.selected.shippingCost}" title="#{bundle.CreatePurchaseOrderTitle_shippingCost}" />
</p:panelGrid>
<p:commandButton actionListener="#{purchaseOrderController.create}" value="#{bundle.Save}" oncomplete="handleSubmit(args,'PurchaseOrderCreateDialog11');"/>
<p:commandButton value="#{bundle.Cancel}" onclick="PurchaseOrderCreateDialog11.hide()"/>
</h:panelGroup>
</h:form>
</p:dialog>
JSF managed bean
#Named("purchaseOrderController")
#SessionScoped
public class PurchaseOrderController implements Serializable {
public PurchaseOrder prepareCreate() {
System.out.println("Purchase order prepare create");
selected = new PurchaseOrder();
initializeEmbeddableKey();
return selected;
}
}
I have a view which is working well. However, when I add a required="true" into the body of the view, the view begin to be unable to read backing bean properly. Below is a comparison:
Anyone knows why?
.
Edit: Code fragment supplement
Below is the fragment of my code in which the problem arises. If I add required="true" into any p:inputText (not only the p:inputText that belong to this dialog but any p:inputText inside the html body), it stops displaying information from backing bean, remove it and everything works just fine.
<p:dialog header="Customer Editor" widgetVar="customerEditDialog"
resizable="false" id="customerEditDlg" showEffect="fade"
hideEffect="fade" modal="true">
<h:panelGrid id="editGrid" columns="2" cellpadding="4"
style="margin:0 auto;">
<h:outputLabel for="customerNameEdit" value="Name: " />
<p:inputText id="customerNameEdit" maxlength="30"
value="#{customerController.customerAdd.name}" />
<h:outputLabel for="customerPhoneNumberEdit" value="Phone Number " />
<p:inputText id="customerPhoneNumberEdit" maxlength="15"
onkeypress="if(event.which < 48 || event.which > 57) return false;"
value="#{customerController.customerAdd.phoneNumber}" />
<h:outputLabel for="customerEmailEdit" value="Email: " />
<p:inputText id="customerEmailEdit" maxlength="49"
value="#{customerController.customerAdd.email}" />
<h:outputLabel for="customerAddressEdit" value="Address: " />
<p:inputText id="customerAddressEdit" maxlength="190"
value="#{customerController.customerAdd.address}" />
<f:facet name="footer">
<div style="text-align: right">
<p:commandButton id="editCustomerButton"
update=":form:customerList, :form:messages"
oncomplete="customerEditDialog.hide()" value="Save"
actionListener="#{customerController.editCustomer()}">
</p:commandButton>
<p:commandButton id="cancelEditCustomerButton" update=":form"
onclick="customerEditDialog.hide()" value="Cancel">
</p:commandButton>
</div>
</f:facet>
</h:panelGrid>
</p:dialog>
See if jsf required=true destroys setPropertyActionListener? helps you.
The problem is most likely that the setter in your bean is not to be called because of validation errors somewhere else or you are nesting <h:form> elements.
I am using JSF 2.0 with Primefaces 3.4.2
For some strange reason I am not able to get the value in popup dialog window when a command button of row in datatable is clicked. Not sure what am I doing wrong?
Any help is highly appreciable.
I have the following in JSF page
<p:dataTable id="dataTable" var="emp" lazy="true"
value="#{myMB.lazyModel}"
selection="#{myMB.selectedEmployee}"...>
<p:column>
<p:commandButton id="edit" update=":frmedit:editDlg" process="#this"
onmousedown="dlg.show()" icon="ui-icon-pencil"
title="Edit" >
<f:setPropertyActionListener value="#{emp}"
target="#{myMB.selectedEmployee}" />
</p:commandButton>
</p:column>
Dialog code
<h:form id="frmedit">
<p:dialog header="Employees" style="font-weight:bold"
widgetVar=Dialog" resizable="false" id="dlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" width="200" height="250">
<h:panelGrid columns="2" cellspacing="5">
<h:outputText value="Employee #" />
<h:outputText value="#{myMB.selectedEmployee.empNo}"
style="font-weight:bold" />
</h:panelGrid>
And finally in ManagedBean
#Named("myMB")
#ViewAccessScoped
private Employee selectedEmployee= new Employee();
with getters and setters
Update 1
<p:column>
<p:commandButton id="edit" update=":frmedit:display" process="#this"
title="View"
icon="ui-icon-pencil" style="border-width:0;background:none;"
onmousedown="Dialog.show()">
<f:setPropertyActionListener value="#{emp}"
target="#{myMB.selectedEmployee}" />
</p:commandButton>
</p:column>
<p:dialog header="Employees" style="font-weight:bold"
widgetVar=Dialog" resizable="false" id="dlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" width="200" height="250">
<h:form id="frmedit">
<h:panelGrid id="display" columns="2" cellspacing="5">
<h:outputText value="Employee #" />
<h:outputText value="#{myMB.selectedEmployee.empNo}"
style="font-weight:bold" />
</h:panelGrid>
</h:form>
</p:dialog>
The three main reasons why this would be the case are
The dialog was not actually ajax updated
The property listener didn't set the value. You could easily debug this by adding some logging to the setter for that property
The bean was actually recreated and the selectedEmployee property was re-initialized per your
line:
Employee selectedEmployee= new Employee();
Per your comments on the previous answer, you should not have widgetVar and id for the same dialog having the same value
My vote is on (3). You should verify that the bean is not actually being trashed and recreated (constructor or #PostConstructor logging).
Try widgetVar="dlg" instead, in <p:dialog...> , according to this Example you should call
dialog from its widgetVar attribute
so dlg.show() refers to widgetVar="dlg" not the id