How to set JSF input field value before submit - jsf

I a have a JSF page with PrimeFaces with some input fields. Before a submit is done, I would like to use the value of a field as input for a method which does some calculations and updates another field with the result but without submitting the form.
This is the field that will be used as input for my method:
<h:outputLabel for="hiredate" value="#{msgs['addUser.hireDate']}" />
<p:calendar id="hiredate" value="#{userWizardMB.user.hireDate}" required="true" immediate="true"/>
<p:message for="hiredate" />
The calculation is done by clicking a <p:commandButton>:
<p:commandButton value="Calculate days" icon="ui-icon-circle-check" action="#{userWizardMB.calculateVacationDays}" update="vacationDays" process="#this" immediate="true"/>
And this is the method called:
public void calculateVacationDays() {
user.setVacationDays((int) vacationDaysCalculator
.calculateWithHireDate(user.getHireDate()));
}
When debugging, though, I see that this field is NULL even if I set value in the form.
How can I force the setting of this field - user.hireDate because I really need this value for my calculation?
Thank you
Edit: I removed all of the other fields in the form and the immediate attribute:
<h:form id="addUserForm">
<p:wizard widgetVar="wizard" flowListener="#{userWizardMB.onFlowProcess}">
<!-- TAB FOR PERSONAL DATA -->
<p:tab id="personal" title="#{msgs['addUser.personalTab']}">
<p:panel header="#{msgs['addUser.personalInformation']}">
<p:message for="vacationDays" showDetail="true" autoUpdate="true" closable="true"/>
<h:panelGrid columns="3" columnClasses="label, value" styleClass="grid">
<h:outputLabel for="hiredate" value="#{msgs['addUser.hireDate']}" />
<p:calendar id="hiredate" value="#{userWizardMB.user.hireDate}" required="true" />
<p:message for="hiredate" />
<h:outputLabel for="vacationDays" value="#{msgs['addUser.vacationDays']}"/>
<p:inputText id="vacationDays" value="#{userWizardMB.user.vacationDays}"/>
<p:commandButton value="Calculate days" icon="ui-icon-circle-check" action="#{userWizardMB.calculateVacationDays}" process="#this hiredate" update="vacationDays"/>
</h:panelGrid>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
And the backing bean method is still not called.

Remove immediate="true" from the input and the command component. Do not use immediate unless you really understand what it should be used for. Further you also need to include the input component which you'd like to process in the update attribute of the command component. Note that this should represent the client ID, not the property name as mentioned in one of your comments.
<p:calendar id="hiredate" value="#{userWizardMB.user.hireDate}" required="true" />
...
<p:commandButton value="Calculate days" icon="ui-icon-circle-check"
action="#{userWizardMB.calculateVacationDays}"
process="#this hiredate" update="vacationDays" />
See also:
Why was "immediate" attribute added to the EditableValueHolders?

Use process="#form" (or process="[the id of the calendar component]" in the commandButton
process="#this" means that only the part of the model related to the commandButton (usually none) gets updated.

Old question, but did you add partialSubmit="true" in the commandButton tag? At least in PrimeFaces 3.5, false is the default value of this attribute (see the PrimeFaces PDF documentation).

Related

Primefaces InputText stores previous value when present inside the Primefaces Dialog

I have a InputText inside a Dialog as:
<p:dialog header="Demo Header"appendTo="#(body)"
widgetVar="sectionDialog" id="section_Dialog"
modal="true">
<h:panelGroup id="myPanel">
<h:panelGrid columns="4">
<h:outputLabel value="Count: "/>
<pe:keyFilter mask="num" for="count" />
<p:inputText id="count"
value="#{myBean.countValue}" converter="spaceConverter">
</p:inputText>
<p:commandButton id="btnId" process="#this"
update="secondPanel" value="ADD" icon="ui-icon-check"
action="#{myBean.generateDataTableBasedOnCount()}" ajax="true"
partialSubmit="true">
</p:commandButton>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup style="border:0" id="secondPanel">
...// data table generated based on Input Count.
</h:panelGroup>
</p:dialog>
If I keep the InputText and Button outside the dialog, it works like a charm.
But when I keep them inside the Dialog, myBean.countValue always stores the previous input value.
When I refresh the page and enter a new value, Old Value is being stored in the bean.
What am I missing here?
PrimeFaces : 5.3
PrimeFaces-Extension : 4.0.0
JSF : 2.2.8
You need to ResetInput of the dialog before you open it.
See: https://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
So on the button that opens your dialog... Its better to reset the FORM but I didn't see the h:form in your example code above.
<p:commandButton value="Open Dialog" update="section_Dialog">
<p:resetInput target="section_Dialog"/>
</p:commandButton

JSF Required Field only call message if i leave them

I have a problem with the JSF validation. I have the following form - only the first inputfield is required. So if I leave them empty and click on the primefaces calendar field - JSF render the whole form and of course I got a message that the field is required.
So I need a solutions that the field only call the blur event or required message when I leave the field not when I click another field etc.
<h:form>
<p:growl id="msg" showDetail="true" />
<b:panelGrid col-spans="4,8" columns="2" id="inputPanel">
<h:outputLabel value="ID*"></h:outputLabel>
<b:inputText value="#{managedBean.avsId}" required="true"
update="msg" onblur="ajax:managedBean.checkDublicates()"></b:inputText>
<h:outputLabel value="Legal Form"></h:outputLabel>
<b:switch animate="true" on-text="natural" offColor="danger"
onColor="success" off-text="forensic"
value="#{managedBean.legalform}">
</b:switch>
<h:outputLabel value="Date"></h:outputLabel>
<p:calendar value="#{managedBean.date}" pattern="dd.MM.yyyy">
<f:converter converterId="timestampConverter" />
</p:calendar>
<h:outputLabel value="Note" style="margin-top:5%;"></h:outputLabel>
<b:inputTextarea style="margin-top:5%;"
value="#{managedBean.note}"></b:inputTextarea>
</b:panelGrid>
<b:commandButton value="apply" look="success"
style="width:100%;" action="#{managedBean.create()}"
update="#form" />
</h:form>

p:ajax not updating p:inputText

I am unable to update a <p:inputText> based on the value entered in another <p:inputText> using <p:ajax>. I am using JSF 2 with PrimeFaces 5. The second <p:inputText> is not updating, the listener associated with <p:ajax> is being called and i am getting the correct values in the listener but its not updated on the view.
the view code is:
<p:dialog id="newStdDlg" header="Add new Student" widgetVar="newStdDlg" modal="true">
<h:panelGrid id="newStdDlgPanel" columns="2" cellpadding="5" style="width:100%;">
<p:outputLabel value="First Name *" />
<p:inputText id="studentfname" value="#{addStudentBean.student.firstName}">
<p:ajax event="change" update="studentUsrname" listener="#{addStudentBean.firstNameChange}" />
</p:inputText>
<p:outputLabel value="Last Name *" />
<p:inputText value="#{addStudentBean.student.lastName}"/>
<p:outputLabel value="Father's Name *" />
<p:inputText value="#{addStudentBean.student.fatherName}"/>
<p:outputLabel id="uLbl" value="Username (System Generated) *" />
<p:inputText id="studentUsrname" value="#{addStudentBean.student.user.username}" />
<p:outputLabel value="This temporary password would be mailed to user: " />
<p:outputLabel id="stdpassword" value="#{addStudentBean.student.user.password}"/>
</h:panelGrid>
<p:commandButton value="Create Student"
actionListener="#{addStudentBean.addNewStudentAction}"
style="margin-left:auto;margin-right:auto;display:block;"/>
</p:dialog>
and the listener of the session scoped managed bean is :
public void firstNameChange() {
System.out.println("In AddStudentBean().firstNameChange()..........");
System.out.println("The value of student.getFirstName: "+student.getFirstName());
System.out.println("updating system generated username as: "+student.getFirstName()+String.valueOf(new UserDAO().getUserCount()+1));
student.getUser().setUsername(student.getFirstName()+String.valueOf(new UserDAO().getUserCount()+1));
student.getUser().setPassword(KaaloUtils.getPassword());
}
Like Jaqen mentioned in comments the comments use h:form inside dialog.
If you want to update the component from ManagedBean you can do that by using org.primefaces.RequestContext's update method.
RequestContext.getCurrentInstance().update("COMPONENT_ID_TO_UPDATE")
If you feel like this method is too Cohesive, you can update from Facelet only, make sure remember to not place p:dialog in a h:from instead use h:form inside p:dialog .

primefaces dialog with inputtext as parameter

I would like to give the content of an inputText as a parameter to a function in a backing bean, I know that I could send the content in the backing bean, but it doesn't make much sense in my object model. I know that in the datatable, you can provide a function with the name of the "var", I thought I could use the same mechanism by passing the ID of the inputText, but it always sends null. Is there a way to do it ?
<p:dialog id="dialog" header="Reason for obsolescence" modal="true" widgetVar="dlg">
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="reason" value="Reason for obsolescence :" />
<p:inputText value="default" id="reason" required="true" label="reason" />
<p:commandButton id="provideReason" value="Ok" update=":form:tabView:table-metadata"
action="#{tableMetadataController.setSelectedObsolete(reason)}"
oncomplete="dlg.hide()"/>
</h:panelGrid>
</h:form>
</p:dialog>
Thanks

How to only show dialog after successfully validated text field

So I have form with 1 fields that need to be required
<h:form id="form">
<h:panelGrid columns="2">
<h:inputText id="default" requiredMessage="This field is required."
value="#{displayName.name}" required="true" />
<p:message for="default"/>
</h:panelGrid>
<p:commandButton value="Test" update="form" onclick="displayDlg.show();"/>
</h:form>
<p:dialog header="Dialog" widgetVar="displayDlg" id="dialog">
<h:outputText value="The name you just input is: #{displayName.name}"/>
</p:dialog>
So when I click button Test, and not having anything inside the text-box, then an error message pop out.
I want that if the validation process success, then I want to display a dialog box that display name that you just type in. But if validation fail, then dont diplay the dialog. And I have a hard time making this happen. I try to put the dialog inside or outside the dialog, but no work. Please give me some advice
You could make use of the visible attribute of <p:dialog> and ajax-update the whole dialog.
<h:form id="form">
<h:panelGrid columns="2">
<h:inputText id="default" requiredMessage="This field is required."
value="#{displayName.name}" required="true" />
<p:message for="default"/>
</h:panelGrid>
<p:commandButton value="Test" update="form :dialog" />
</h:form>
<p:dialog id="dialog" header="Dialog" visible="#{not empty displayName.name}">
<h:outputText value="The name you just input is: #{displayName.name}"/>
</p:dialog>
Additional benefit of having :dialog in the update is that it will update the entered name as well everytime you change it.

Resources