I've been working with PrimeFaces for less than 24 hours so maybe I'm missing the obvious.
I have two SelectOneMenu components. the second one is no rendered at first. When a value is changed in the first one. the listener retrieves data from db, update ManagedBean property with the data and change boolean property to show the second one. The second Menu is now rendered but no data is shown.
Here is the snippet:
<h:form prependId="false" id="notaForm">
<h:panelGrid>
<p:selectOneMenu value="#{notaBean.idCurso}"
style="width:150px" >
<f:selectItem itemLabel="Seleccione curso" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{notaBean.cursos}" var="c" itemLabel="#{c.nombre}" itemValue="#{c.idCurso}"/>
<p:ajax event="change" listener="#{notaBean.onSelectCurso}" update="alumno" />
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid id="alumno">
<p:selectOneMenu value="#{notaBean.idAlumno}" var=""
style="width:150px" rendered="#{notaBean.mostrarAlumnos}">
<f:selectItem itemLabel="Seleccione alumno" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{notaBean.alumnos}" var="a" itemLabel="#{a.nombre}" itemValue="#{a.idAlumno}"/>
<p:ajax event="change" listener="#{notaBean.onSelectAlumno}" update="nota" />
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid id="nota">
<p:outputLabel for="nota" value=""
rendered="#{notaBean.mostrarNota}" />
<p:inputText value="#{notaBean.nota}" label="nota"
rendered="#{notaBean.mostrarNota}" />
<h:commandButton action="#{notaBean.insertarNota()}" id="button"
value="Guardar nota" rendered="#{notaBean.mostrarNota}"/>
</h:panelGrid>
</h:form>
notaBean.alumnos has a size of 2 (it recovers both alumni from db), and the properties nombre and idAlumno shows correctly when I print them out in console.
Related
<h:form id="newStudentForm">
<h:outputLabel value="Student" for="studentId" />
<p:selectOneMenu value="#{myBean.studentId}" id="studentId">
<f:selectItems value="#{myBean.studentList}" var="student"
itemLabel="#{student.name}" itemValue="#{student.id}" />
</p:selectOneMenu>
<h:outputLabel value="Address" for="addressId" />
<p:selectOneMenu value="#{myBean.addressId}" id="addressId">
<f:selectItems value="#{myBean.addressList}" var="address"
itemLabel="#{address.name}" itemValue="#{address.id}" />
</p:selectOneMenu>
<h:outputLabel value="Address" for="addressId" />
<p:selectOneMenu value="#{myBean.subjectId}" id="subjectId">
<f:selectItems value="#{myBean.subjectList}" var="subject"
itemLabel="#{subject.name}" itemValue="#{subject.id}" />
<a4j:ajax event="valueChange"
render="newStudentForm"
listener="#{myBean.checkSubject}"
execute="#this"/>
</p:selectOneMenu>
<h:outputLabel value="Price" for="priceId" rendered="#{myBean.checkSubject}" />
<p:selectOneMenu value="#{myBean.priceId}" id="priceId"
rendered="#{myBean.checkSubject}">
<f:selectItem itemValue="#{null}" itemLabel="" />
<f:selectItems value="#{myBean.priceList}" var="price"
itemLabel="#{price.name}" itemValue="#{price.id}"/>
</p:selectOneMenu>
</h:form>
I am trying to make a field dynamic i.e field Price, when i am selecting a value from subject, the price field is dependent on that value. Everything is working fine in this code except that when i am rendering the form, the values that i enter in other fields(like address) before selecting subject is being overridden by the initial values. So how should i refactor this ajax event call so that the values do not get overridden.
The checkSubject function is returning true or false based on subject selected.
I am relatively new to JSF and Primefaces. I have a page in which I have three selectOneMenu displaying the same set of values from a map. I would like to make sure that the user selects different values for the three drop downs. I have achieved this by writing a custom validator. But the validator works only if I click the submit page. I want to have an ajax call which would show an error message for drop down 2 as soon as the user selects the same value as drop down 1.Also the same case for drop down 3.Here is my code snippet:
user.xhtml
<h:outputLabel for="Question1" value="#{msg['account.question1']}"/>
<h:message styleClass="validation-error" for="Question1"/>
<h:selectOneMenu id="Question1" required="true" value="#{account.question1}" class="smallTxt">
<f:selectItems value="#{controller.questionMap}" />
<f:validator validatorId="com.validator.QuestionsValidator"></f:validator>
</h:selectOneMenu>
<h:outputLabel for="Answer1" value="#{msg['account.answer1']}"/>
<h:message styleClass="validation-error" for="Answer1"/>
<h:inputText id="Answer1" required="true" value="#{account.answer1}" />
<h:outputLabel for="Question2" value="#{msg['account.question2']}"/>
<h:message styleClass="validation-error" for="Question2"/>
<h:selectOneMenu id="Question2" required="true" value="#{account.question2}" class="smallTxt">
<f:selectItems value="#{controller.questionMap}" />
</h:selectOneMenu>
<h:outputLabel for="Answer2" value="#{msg['account.answer2']}"/>
<h:message styleClass="validation-error" for="Answer2"/>
<h:inputText id="Answer2" required="true" value="#{account.answer2}" />
<h:outputLabel for="Question3" value="#{msg['account.question3']}"/>
<h:message styleClass="validation-error" for="Question3"/>
<h:selectOneMenu id="Question3" required="true" value="#{account.question3}" class="smallTxt">
<f:selectItems value="#{controller.questionMap}" />
</h:selectOneMenu>
<h:outputLabel for="Answer3" value="#{msg['account.answer3']}"/>
<h:message styleClass="validation-error" for="Answer3"/>
<h:inputText id="Answer3" required="true" value="#{account.answer3}" />
I am using JSF 2 and Primefaces 5.2.
Thanks in advance
If you want to execute your validator on an AJAX call, you have to add <f:ajax /> to your <h:selectOneMenu>
<h:selectOneMenu id="Question1" required="true" value="#{account.question1}" class="smallTxt">
<f:selectItems value="#{controller.questionMap}" />
<f:validator validatorId="com.validator.QuestionsValidator"></f:validator>
<f:ajax />
</h:selectOneMenu>
Side question: You state, that you use Primefaces 5.2, but you use JSF standard components (<h:selectOneMenu> instead of <p:selectOneMenu>). Is that on purpose?
You can apply listener on selectonemenu.linke this:
<p:selectOneMenu id="country" value="#{dropdownView.country}" style="width:150px">
<p:ajax listener="#{dropdownView.onCountryChange}" update="city" />
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropdownView.countries}" />
</p:selectOneMenu>
And then in this oncountrychange() function you will get the values of all the three select items and compare them.
I am using p:ajax of primefaces in a p:selectOneRadio, to disable and re-enable form input text fields. these text fields have watermarks which disappear after disabling and they do not appear even after re-enabling them. I could not figure out the problem. please help. The code chunk where it appears is as bellow
<h:outputText
value="#{msg['elicense.contractorLicenseForm.personal.licenseApplied']}"/>
<p:selectOneRadio id="licenseApplied"
value="#{contractorLicenseBean.licenseApplied}">
<f:selectItem itemLabel="Yes" itemValue="1" />
<f:selectItem itemLabel="No" itemValue="0"/>
<p:ajax update="licensePersonName, relationshipPersonName" />
</p:selectOneRadio>
<h:outputText value="When it is yes, it should skip to supervisor details"/>
<h:outputText
value="#{msg['elicense.contractorLicenseForm.personal.licensePersonName']} "/>
<p:inputText id="licensePersonName"
value="#{contractorLicenseBean.licensePersonName}"
required="true"
label="LicensePersonName"
disabled="#{contractorLicenseBean.licenseApplied=='1'}"/>
<p:watermark for="licensePersonName"
value="Person/firm/company on whose Favour License is Sought "
id="watermark2" />
<h:outputText
value="#{msg['elicense.contractorLicenseForm.personal.relationshipPersonName']} "/>
<p:inputText id="relationshipPersonName"
value="#{contractorLicenseBean.relationshipPersonName}"
required="true"
label="RelationshipPersonName"
disabled="#{contractorLicenseBean.licenseApplied=='1'}" />
<p:watermark for="relationshipPersonName"
value="Relationship of the Applicant "
id="watermark3" />
Use a h:panelGroup around your watermarked components and update that h:panelGroup instead of component.
Primefaces binds the watermark to component through JQuery. If you changes/update the component then events bound to that component will not work, that may be the reason for your Issue.
I used primefaces 5.0, and I encountered as your problem. When I put the p:inputText into p:panelGrid and update the panelGrid. The problem was gone.
<h:form>
<p:messages id="messages" showDetail="true"/>
<p:selectOneRadio id="radio" value="#{watermarkView.radio}">
<f:selectItem itemLabel="Yes" itemValue="1" />
<f:selectItem itemLabel="No" itemValue="0"/>
<p:ajax process="radio" update="panelGridInput" />
</p:selectOneRadio>
<h:panelGrid id="panelGridInput"
columns="3" cellpadding="5"
style="margin-bottom:10px">
<h:outputLabel value="Search: "/>
<p:inputText id="keyword"
value="#{watermarkView.keyword}"
required="true"
label="Keyword"
disabled="#{watermarkView.radio eq '1'}"/>
<p:watermark for="keyword"
value="Search with a keyword"
id="watermark" />
<h:outputLabel value="Search: "/>
<p:inputText id="keyword2"
value="#{watermarkView.keyword2}"
required="true"
label="Keyword"
disabled="#{watermarkView.radio eq '1'}"/>
<p:watermark for="keyword2"
value="Search with a keyword"
id="watermark2" />
</h:panelGrid>
<p:commandButton id="regular"
actionListener="#{watermarkView.search}"
value="Regular"
ajax="false" />
<p:commandButton id="ajax"
actionListener="#{watermarkView.search}"
value="Ajax"
onclick="PrimeFaces.cleanWatermarks();"
oncomplete="PrimeFaces.showWatermarks();"
update="messages" />
</h:form>
I trying to use the onChange event of selectOneMenu, but it doesn't work and the form is not reloaded bye the data chosen when I add onChange attribue.
Can someone tell me how can I handle the onChange event of ?
Here is my view:
<p:panel id="cubeId" header="Cube" widgetVar="toggleable>
<h:form id="CubeIdForm">
<p:panelGrid columns="2">
<p:outputLabel value="Cube Name: "></p:outputLabel>
<p:inputText value="#{cubeMan.cub.name_cube}"></p:inputText>
<p:outputLabel value="Description: "></p:outputLabel>
<p:inputText value="#{cubeMan.cub.description_cube}"></p:inputText>
<p:outputLabel value="Caption: "></p:outputLabel>
<p:inputText value="#{cubeMan.cub.caption_cube}"></p:inputText>
<p:outputLabel value="Cache: "></p:outputLabel>
<p:selectBooleanCheckbox value="#{cubeMan.cub.cache}"></p:selectBooleanCheckbox>
<p:outputLabel value="Enabled : "></p:outputLabel>
<p:selectBooleanCheckbox value="#{cubeMan.cub.enabled}"
label="Activate Cube"></p:selectBooleanCheckbox>
<p:outputLabel value="Visible : "></p:outputLabel>
<p:selectBooleanCheckbox value="#{cubeMan.cub.visible}"></p:selectBooleanCheckbox>
<p:outputLabel value="Select Column: " />
<p:selectOneMenu value="#{cubeMan.name_cube}" id="cat">
<f:selectItem itemLabel="Select Column" itemValue="" />
<f:selectItems value="#{cubeMan.getColumnName()}" />
</p:selectOneMenu>
<p:outputLabel value="Select Cube: " />
<p:selectOneMenu value="#{cubeMan.name_cube}" id="cub">
<f:selectItem itemLabel="Select Cube" itemValue="" />
<f:selectItems value="#{cubeMan.AllCubs()}" />
<p:ajax event="change" listener="#{cubeMan.dUpdateCube}" update="#this" />
</p:selectOneMenu>
</p:panelGrid>
<p:commandButton value="Add" action="#{cubeMan.makeCube()}" update="#form">
<p:commandButton action="#{cubeMan.handleCube()}" /></p:commandButton>
</h:form>
</p:panel>
And here is the method in a request scoped bean:
public void dUpdateCube(AjaxBehaviorEvent event){
cubeService.update_cube(cub);
}
public void handleCube() {
cubeService.update_cube(cub);
}
When I change the menu, however, nothing is been printed.
How is this caused and how can I solve it?
I think you are talking about the selectOneMenu with id="cub".
You have to change the value of update of the p:ajax-element. With your current setting nothing gets updated. Try the following to update the whole form:
<p:ajax event="change" listener="#{cubeMan.dUpdateCube}" update="#form" />
Can anyone tell me how to automatically set <h:selectOneMenu> (or any other component) with values depending on another <h:selectOneMenu> if there empty elements with 'required' set to 'true' on the form? If to set <a4j:support event="onchange" reRender="anotherElement" immediate="true" /> then nothing is changed because changed value isn't set. But without immediate="true" I always have message that this or that element cannot be empty. Here's code example that doesn't work.
<h:outputLabel value="* #{msg.someField}: "/>
<h:panelGrid cellpadding="0" cellspacing="0">
<h:selectOneMenu id="someSelect"
value="#{MyBean.someObj.someId}"
required="true" label="#{msg.someField}"
>
<a4j:support event="onchange" reRender="anotherSelect" limitToList="true" immediate="true"/>
<f:selectItem itemValue=""/>
<f:selectItems value="#{MyBean.someList}"/>
</h:selectOneMenu>
<rich:message for="someSelect" styleClass="redOne"/>
</h:panelGrid>
<h:outputLabel value="* #{msg.anotherField}: "/>
<h:panelGrid cellpadding="0" cellspacing="0">
<h:selectOneMenu id="anotherSelect"
value="#{MyBean.someObj.anotherId}"
required="true" label="#{msg.anotherField}"
>
<f:selectItem itemValue=""/>
<f:selectItems value="#{MyBean.anotherList}"/>
</h:selectOneMenu>
<rich:message for="anotherSelect" styleClass="redOne"/>
</h:panelGrid>
<h:outputLabel value="* #{msg.name}: "/>
<h:panelGrid cellpadding="0" cellspacing="0">
<h:inputText id="myName" value="#{MyBean.someObj.myName}"
required="true" label="#{msg.name}"/>
<rich:message for="myName" styleClass="redOne"/>
</h:panelGrid>
So, here (I repeat), if I try to change 'someSelect' then 'anotherSelect' should update its values but it doesn't because either when it tries to get value of 'someSelect' it gets null (if immediate set to true) or form validation fails on empty elements. How can I skip validation but get this changed value from 'someSelect'?
Have you tried adding ajaxSingle="true" to the someSelect a4j:support element? Remove the immediate="true"
The following solution works in JSF 2.0
<h:outputLabel
value="* Country: "/>
<h:selectOneMenu
id="someSelect"
value="#{testController.countryName}"
required="true">
<f:selectItem
itemLabel="Select Country"
itemValue=""/>
<f:selectItems
value="#{testController.countryNamesSelectItems}"/>
<!-- This will only update "someSelect" and repaint "anotherSelect" -->
<f:ajax
execute="#this"
render="anotherSelect"/>
</h:selectOneMenu>
<h:outputLabel
value="* State: "/>
<h:selectOneMenu
id="anotherSelect"
value="#{testController.stateName}"
required="true">
<f:selectItem
itemLabel="Select State"
itemValue=""/>
<f:selectItems
value="#{testController.stateNamesSelectItems}"/>
</h:selectOneMenu>
The f:ajax call will submit an ajax request to the server onchange of "someSelect". The model update for only the "someSelect" component will happen (because of execute="#this"). In the render response phase, only "anotherSelect" will be re-rendered (thus invoking testController.stateNamesSelectItems with the updated country name).
As a result of all this, the states of the selected country will get updated as an when country is changed...the ajax way.
Hope this helps.