JSF:ajax keyup for 2 fields - ajax

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
}
}

Related

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

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?

Set p:selectBooleanCheckbox value to bean with ajax

Hi i have a primefaces datatable with dynamic columns
<h:form>
<p:dataTable id="cars" var="car" value="#{formBean.carsSmall}"
filteredValue="#{formBean.filteredCars}">
<p:columns value="#{formBean.columns}" var="column"
columnIndexVar="colIndex"sortBy="#{column.property}"
filterBy="#{column.property}">
<f:facet name="header">
#{column.header}
</f:facet>
<p:outputPanel
rendered="#{(column.header eq 'CHECKVALUE1') or (column.header eq 'CHECKVALUE2')}" >
<p:selectBooleanCheckbox value="#{car.checkValue}" id="checkboxId">
</p:selectBooleanCheckbox>
</p:outputPanel>
<p:outputPanel
rendered="#{(column.header ne 'CHECKVALUE1') and (column.header ne 'CHECKVALUE2')}" >
#{car[column.property]}
</p:outputPanel>
</p:columns>
</p:dataTable>
</h:form>
and i want to submit checkbox values to bean with ajax how could i do that ??
I tried to write something like:
<p:selectBooleanCheckbox value="#{car.checkValue}" id="checkboxId">
<p:ajax update="#form"/>
</p:selectBooleanCheckbox>
But the value doesnt set to bean..
<p:selectBooleanCheckbox value="#{car.checkValue}" id="checkboxId">
<p:ajax update=":form" listener="#{car.addMessage}"/>
</p:selectBooleanCheckbox>
Java Bean Class -
public void addMessage()
{
//Your Java Code goes here.
}

validate input each time the user add or remove character datatable primefaces

I have this column in my datatable and I want to validate it each time the user add or remove one character in the input
I tested that :
<p:column headerText="Quantité" style="width:20%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{arti.qte}" />
</f:facet>
<f:facet name="input">
<h:panelGroup>
<p:inputText
value="#{arti.qte}" >
<p:ajax event="keyup" listener= "#{mvmtdepotMB.keyupQte}" />
<f:validateDoubleRange minimum="0.1" maximum="#{arti.qtemax}" />
</p:inputText>
<p:message for="qdf" />
</h:panelGroup>
</f:facet>
</p:cellEditor>
</p:column>
but the keyup method is not invoked and the validation does not
how can I achieve that
You should detect the keyup event inside of the p:inputText:
<p:inputText value="#{arti.qte}" onkeyup="validate()"/>
And this is going to execute a p:remoteCommand:
<p:remoteCommand name="validate" actionListener="#{mvmtdepotMB.keyupQte}"/>
Put p:remoteCommand outside of the p:dataTable.
If you want to pass parameters to p:remoteCommand:
onkeyup="validate([{name: 'name1', value: 'value1'}, {name: 'name2', value: 'value2'}]);"
And p:remoteCommand actionListener can retrieve these via:
FacesContext context = FacesContext.getCurrentInstance();
Map map = context.getExternalContext().getRequestParameterMap();
String name1 = (String) map.get("name1");
String name2 = (String) map.get("name2");

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.

Is it possible to pass Calendar new date in the bean without listener?

I am trying to pass new date from PrimeFaces p:calendar (placed in p:dataTable column) to the backing bean:
<p:column >
<p:calendar value="#{bean.date}">`
<p:ajax />
</p:calendar>
</p:column>
It does not update bean.date. Variants with
<p:ajax update="#this" event="change"/>
<p:ajax update="#this" event="select"/>
do not update bean.date too. The only way I have found is using of listener. However, I suppose, there should be a way without listener implementation like for simple facelets:
<p:column>
<h:inputText value="#{bean.note}" >
<f:ajax/>
</h:inputText>
</p:column>
that works fine for me. Does anybody know how to get it working!?
<p:calendar value="#{Bean.value}">
<p:ajax update="display" event="dateSelect" listener="#{Bean.handleDateSelect}"/>
</p:calendar>
This should be helpful...but without listener means i dont think soo..you cant...
p:calendar it's a bit tricky for ajax; onSelectUpdate & selectListener are the key;
<p:column>
<h:inputText id="itDate" value="#{bean.note}" >
<f:ajax/>
</h:inputText>
</p:column>
and you must implement the handleDateSelect method in the Bean;
public void handleDateSelect(DateSelectEvent event) {
Date date = event.getDate();
setDate(date);
}

Resources