Jsf primefaces dropdown updated fails only during validation failure [duplicate] - ajax

This question already has answers here:
How can I populate a text field using PrimeFaces AJAX after validation errors occur?
(3 answers)
Closed 7 years ago.
I have a drop down (id="localOffInputId"), the value of which needs to be modified based on a text box input (id="rZip"). It works fine when there are no validation errors in the form. When a validation error occurs, the form gets redisplayed with the error messages as expected. Now when I change the value in the text box, the listener method (updateLocalOffice()) gets called and the localOfficeCode gets set to a new value but the drop down selection does not change in the browser. I noticed that the getter for the localOfficeCode property is not called after the ajax call though the getter for the localOfficeMap is getting called. Any idea why this happens only when validation failure occurs?
<p:row>
<p:column>
<h:panelGroup id="resZipInputId">
<p:inputMask id="rZip" value="#{createProfile.profileForm.rZip}" mask="99999" size="5" required="true" requiredMessage="#{msg['msg.physical.zip.required']}" valueChangeListener="#{createProfile.addDirtyFields}">
<f:attribute name="fieldName" value="Physical Address - ZIP" />
<f:attribute name="fieldOrder" value="24"/>
<p:ajax event="change" listener="#{createProfile.profileForm.updateLocalOffice}" update="localOfficeTableId,localOffInputId, localOfficeDropdownId" />
</p:inputMask>
<h:outputText value=" - "/>
<p:inputMask value="#{createProfile.profileForm.rZipPlus4}" mask="9999" size="4" valueChangeListener="#{createProfile.addDirtyFields}"></p:inputMask>
</h:panelGroup>
</p:column>
</p:row>
<p:row>
<p:column colspan="2">
<h:panelGroup id="localOfficeTableId">
<p:panelGrid styleClass="noBorderPanelGrid">
<p:row>
<p:column>
<h:panelGroup id="localOffInputId">
<h:selectOneMenu value="#{createProfile.profileForm.localOfficeCode}" id="localOfficeDropdownId" valueChangeListener="#{createProfile.addDirtyFields}" required="true" requiredMessage="#{msg['msg.localoffice.required']}">
<f:selectItems value="#{createProfile.profileForm.localOfficeMap}" />
</h:selectOneMenu>
</h:panelGroup>
</p:column>
</p:row>
</p:panelGrid>
</h:panelGroup>
</p:column>
</p:row>
public void updateLocalOffice(){
final String resZip = this.rZip;
if (StringUtils.isNotBlank(resZip)) {
final String localOfficeCodeForZip = this.service
.getLocalOfficeCodeForZip(this.rZip);
if (StringUtils.isNotBlank(localOfficeCodeForZip)) {
this.setLocalOfficeCode(localOfficeCodeForZip);
} else {
this.setLocalOfficeCode(Constants.OOS_CODE);
}
}
}

Found answer to the problem. Adding "resetValues="true"" to the ajax call fixed the issue
Link - How can I populate a text field using PrimeFaces AJAX after validation errors occur?

Related

Field validation applies to all the component within the ui:repeat

i'm using JSF 2.2.8 and primefaces 6.0 and I'm trying to update an element in my form. When i run my XHTML everything is displayed correctly but unfortunately when I start to input data in the input fileds it does'nt let me input data and the input mask is applied to each input and by displaying a message you must indicate a value and the fields are not required
Here is the screen of my view
http://imgur.com/a/e5avV
and here is the code which causes the problem
<h:form>
<ui:repeat value="#{etpBean.affectations}" var="affectation">
<ui:repeat var="activite" value="#{etpBean.activites}">
<p:inputText value="#{etpBean.getValeurActivite(affectation,activite).etp}">
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle1')}" event="blur" />
</p:inputText>
</ui:repeat>
<ui:repeat var="projet" value="#{etpBean.projet}">
<p:inputText value="#{etpBean.getValeurActivite(affectation,projet).etp}">
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle1')}" event="blur" />
</p:inputText>
</ui:repeat>
<h:outputText id="controle1" value="#{affectation.message}"/>
</ui:repeat
</h:form>
I tried to add the process in but it does not work.And what I do not understand why the validation is triggered while I have not yet submit the form.
There is an implicit #{component} object in the EL scope that evaluates to the current UI component.
try this
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle')}" event="blur" />

JSF:ajax keyup for 2 fields

i have 2 autofill fileds empname and empno if i give empno remaining fields should be autofilled from database,same to empname.but the problem is When i insert new empno remaining entered fields has been set to null,same to empname how to solve it.
<h:outputText value="Employee_no"/>
<h:inputText id="empp" value="#{Bean.dto.empno}" >
<p:ajax event="keyup" update="empn,des,dep,loc" listener="#{Bean.Workerno}"/>
</h:inputText>
<h:outputText value="Employee_Name"/>
<h:inputText id="empn" value="#{Bean.dto.empname}" >
<p:ajax event="keyup" update="empp,des,loc,dep" listener="#{Bean.WorkerName}"/>
</h:inputText>
<h:outputText value="Department"/>
<h:inputText id="dep" value="#{Bean.dto.de}" />
<h:outputText value="Designation"/>
<h:inputText id="des" value="#{Bean.dto.de}" />
<h:outputText value="Employee_no"/>
<h:inputText id="empp" value="#{Bean.dto.empno}" >
<p:ajax event="keyup" update="empn,des,dep,loc" listener="#{Bean.Workerno}"/>
</h:inputText>
<h:outputText value="Employee_Name"/>
<h:inputText id="empn" value="#{Bean.dto.empname}" >
<p:ajax event="keyup" update="empp,des,loc,dep" listener="#{Bean.WorkerName}"/>
</h:inputText>
<h:outputText value="D"/>
<h:inputText id="dep" value="#{Bean.dto.d}" />
<h:outputText value="Designation"/>
<h:inputText id="des" value="#{Bean.dto.de}" />
BEAN
Your code looks fine...
One thing is change the ajax event from KeyUp to blur.
KeyUp - Forces to call the listener method for every typing letter.
Blur - Forces to call the listener method when you left the text box after typing the content.
Here you need 'blur' event because you need to call the DB after entered the all empno .
Make sure that the values are retrieved from DB, after changed the event
As for as my consern your DB value is not getting at workerNo() when ajax listener forces.
JSF Code
<h:ouputText value="empno"/>
<p:inputText id="empno" value="#{bean.empno}">
<p:ajax event="blur" listener="#{bean.ajaxEvent}" update="empname"/>
</p:inputText>
<h:ouputText value="empname"/>
<p:inputText id="empname" value="#{bean.empname}">
Bean Code
//Setters and getters of empname,empno
public void ajaxEvent()
{
if(getEmpNo()==//DB empno)
{
setEmpName("DB empname"); //Here only your updating the name field
}
}

SelectOneRadio inside subtable ajax call not working

I'm using primefaces 3.4.1 and I'm trying to use a SelectOneRadio with an ajax call inside a subtable
but it doesn't work, the ajax listener isn't called
<p:dataTable id="competenciesTable" var="competency" value="#{evaluationControl.currentEvaluation.evaluatedCompetencies}">
<f:facet name="header">
<h:outputText value="#{gchmsg['global.competencies']}" />
</f:facet>
<p:subTable id="descriptorsTable" var="descriptor" value="#{competency.evaluationDescriptors}">
<f:facet name="header">
<h:outputText class="strong" value="#{competency.competency.name}" />
</f:facet>
<p:column>#{descriptor.descriptor.description}</p:column>
<p:column>
<p:selectOneRadio required="true" styleClass="calification_scale" id="descriptorCalification" value="#{descriptor.calification}" converter="calification">
<f:selectItems value="#{competency.competency.calificationSchema.scales}" var="scale" itemLabel="#{scale.qualitativeValue}" itemDescription="#{scale.description}" itemValue="#{scale}" />
<p:ajax process="#this" listener="#{evaluationControl.handleRadioChange}" update=":evaluationForm:finalResultText, descriptorCalificationMsg" />
</p:selectOneRadio>
<p:message id="descriptorCalificationMsg" for="descriptorCalification" display="icon" />
</p:column>
</p:subTable>
</p:dataTable>
The evaluationControl is a SessionBean and the method is
public void handleRadioChange() {
log.debug("Listener called");
}
Help is appreciated.
After too many debugging and tests I finally found the issue, the primefaces Subtable component doesn't put back the values to the Backing Bean for itself you must process the whole DataTable component, so I had to remove the required="true"(to avoid validation errors) for each selectOneRadio and add the process="competenciesTable" to the p:ajax
You can try, deleting process="#this". It worked in my case. I'm not sure why it happens with p:subTable because I've never had this issue with p:dataTable.

Keep <p:dialog> open when validation has failed

I have a CRUD page which shows data from a query (a List of domain objects) in a Primefaces datatable.
<p:dataTable
id="negozi"
var="n"
value="#{nController.theListFromQuery}"
rowKey="#{n.id}"
selection="#{nController.selected}"
selectionMode="single">
<p:column headerText="Field1">
<h:outputText value="#{n.f1}" />
</p:column>
<p:column headerText="Field2">
<h:outputText value="#{n.f2}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
actionListener="#{nController.prepareEdit(n)}"
update=":editDialogId"
oncomplete="editDialog.show()"
value="Edit" />
</p:column>
...
By clicking on the edit button a dialog will be shown:
<p:dialog
header="Edit N"
widgetVar="editDialog"
id="editDialogId">
<h:form id="formDialog">
<h:panelGrid id="editDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="field1" value="F1:" />
<p:inputText id="field1" value="#{nController.selected.f1}" />
<p:outputLabel for="field2" value="F2:" />
<p:inputText id="field2" value="#{nController.selected.f2}" />
<p:commandButton
value="Confirm"
actionListener="#{nController.doEdit}"
update=":form"
oncomplete="editDialog.hide()"
rendered="#{nController.selected.id!=null}" />
...
It works. Now I want to make F1 a required field.
I add the "required" attribute to the inputText field and what happens?
When I try to confirm the form without the required field, the entity is not edited (that's right) but the dialog is closed (that's NOT right!)
When I reopen the dialog I can see the red highlight on the required (and invalid) field.
What I want is to prevent the dialog closing if the form is invalid.
Do I have to write some JS or will JSF help me?
The PrimeFaces ajax response puts an args object in the scope which has a validationFailed property. You could just make use of it.
oncomplete="if (args && !args.validationFailed) PF('editDialog').hide()"
(the args precheck is necessary to not cause a JS error when an exception is thrown during request)
You could refactor it to a reusable JS function as follows.
oncomplete="hideDialogOnSuccess(args, 'editDialog')"
function hideDialogOnSuccess(args, dialogWidgetVar) {
if (args && !args.validationFailed) {
PF(dialogWidgetVar).hide();
}
}
this post is now three years old, but I have found helpful, so my findings may help others.
In PF 5.x at least, it seems that the solution provided by BalusC has to be modified in two ways. (1) add the "args" argument to the call in oncomplete event hander, and (2) use the PF primefaces primitive to identify the widget in PF tables. Here is the code I am using:
oncomplete="hideDialogOnSuccess(args, PF('editDialog'))"
function hideDialogOnSuccess(args, dialogWidgetVar) {
if (args && !args.validationFailed) {
dialogWidgetVar.hide();
}
}
I believe this is the cleanest solution.
Doing this you don't need to change your buttons code.
This solution overrides the hide function prototype.
$(document).ready(function() {
PrimeFaces.widget.Dialog.prototype.originalHide = PrimeFaces.widget.Dialog.prototype.hide; // keep a reference to the original hide()
PrimeFaces.widget.Dialog.prototype.hide = function() {
var ajaxResponseArgs = arguments.callee.caller.arguments[2]; // accesses oncomplete arguments
if (ajaxResponseArgs && ajaxResponseArgs.validationFailed) {
return; // on validation error, prevent closing
}
this.originalHide();
};
});
This way, you can keep your code like:
<p:commandButton value="Save" oncomplete="videoDetalheDialogJS.hide();"
actionListener="#{videoBean.saveVideo(video)}" />
to keep the dialog Open on validation Failed, you just need set the commandButton as follows:
<p:commandButton value="save"
action="#{YourBean.yourActionMethod}"
oncomplete="if (!args.validationFailed) PF('yourDialogWidgetVar').hide()"/>
I gonna leave here a complete example:
<h:form id="ad-form">
<p:dialog id="ad-dialog" widgetVar="adDialog" modal="true" width="400"
closeOnEscape="true" resizable="false" header="Addreass">
<p:messages id="a-msgs" closable="true" />
<h:panelGrid columns="2" id="ad-painel-dialog" width="100%">
<p:outputLabel value="Country" for="country" />
<p:inputText id="country" style="width:100%"
value="#{clientSaverBean.editableAddress.country}" />
<p:outputLabel value="City" for="city" />
<p:inputText id="city"
value="#{clientSaverBean.editableAddress.city}" />
<p:outputLabel value="Zip-Code" for="zipcode" />
<p:inputText id="zipcode"
value="#{clientSaverBean.editableAddress.zipCode}" />
<p:outputLabel value="Street" for="street" />
<p:inputTextarea id="street"
value="#{clientSaverBean.editableAddress.street}" />
<p:outputLabel value="Number" for="number" />
<p:inputText id="number"
value="#{clientSaverBean.editableAddress.number}" />
<h:panelGroup />
<f:facet name="footer">
<p:commandButton value="save"
action="#{clientSaverBean.saveAddress}"
process=":ad-form:ad-dialog"
update=":ad-form:a-msgs :ad-form:ad-painel-dialog :client-form:ad-table"
oncomplete="if (!args.validationFailed) PF('adDialog').hide()"/>
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>

primefaces disabled component validation

I am using jsf 2.1 + primefaces 3.4.1. I've got problems with preventing validation of disabled components.
What I have is approximately this:
<h:form id="form">
<p:dataTable id="parentDataTable" value=#{bean.list} var="parentItem"..>
<p:column>
..
<p:dataTable id="childDataTable" value=#{bean.map[parentItem]}" var="childItem">
<p:column>
<f:facet name="header">
some inputText
</f:facet>
<p:inputText id="inputText"
disabled=#{bean.selectedObjectsMap[childItem]} required="true" requiredMessage="value required" />
<p:message for=":form:parentDataTable:childDataTable:inputText" />
</p:column>
<p:column>
<f:facet name="header">
Select
</f:facet>
<p:selectBooleanCheckbox id="checkBox" value="#{bean.selectedObjectsMap[childItem]}">
<p:ajax update=":form:parentDataTable:childDataTable:inputText" />
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
</p:column>
</p:dataTable>
</h:form>
The idea is that by default the inputText component is disabled and the "required value" validation doesn't work when I submit the form. When I click the selectBooleancheckbox component the inputText gets enabled and the "required value" validation works as well when I submit the form. However, when I disable the inputText back the validation continues to work and the "value required" message appears and I cannot submit the form. It seems that the JSF UI component tree on the server side doesn't properly get updated when I click on the checkbox, although visually I can see that the inputText component gets disabled every time I click on the checkbox.
Any ideas how I can resolve this?
If your validation isnt more complex than shown in this sample code, you code turn it on and off using
<p:inputText id="inputText" disabled="#{bean.selectedObjectsMap[childItem]}" required="#{!bean.selectedObjectsMap[childItem]}" requiredMessage="value required" />
Meaning you toggle required attribute with same bean value as used for disabled attribute, just add a !
If you want to by pass validator on commandButton then you can implement
<f:validator validatorId="EmailValidator" disabled="#{param['disableValidation']}" />
Dynamically enable and disable email validator on form.
<p:commandButton
icon="ui-icon-remove" id="removeBtn"
title="#{commonLbl.cmdRemoveCon}"
disabled="#{pc_searchProspectBean.searchProspectVO.prospectVO.removeContactFlg}"
styleClass="btn btn-sm btn-primary"
action="#{pc_searchProspectBean.doRemoveContact(prospectTbl.indexId)}"
update=":frm1:pnlProspectContact" onclick="modalDialog.show()"
oncomplete="modalDialog.hide()">
<f:param name="disableValidation" value="true" />
</p:commandButton>

Resources