<p:selectOneMenu> onChange event doesn't reload form - events

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" />

Related

Partial Rendering of Form fields with ajax valueChange event in jsf

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

Primefaces ajax handle empty input field

I have an autocomplete field and an output label to display the title of the selected module code
<p:row>
<p:column>
<p:outputLabel for="moduleTitle" value="Module Title: " />
</p:column>
<p:column colspan="2">
<p:outputLabel id="moduleTitle" value="#{classroomBean.classroom.module.moduleTitle}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel for="moduleCode" value="Module Code:" />
</p:column>
<p:column>
<p:autoComplete id="moduleCode" value="#{classroomBean.classroom.module}"
completeMethod="#{classroomBean.completeModule}" dropdown="true"
forceSelection="true"
converter="entityConverter" maxResults="15" required="true"
requiredMessage="Module is required." var="module" itemValue="#{module}" itemLabel="#{module.moduleCode}">
<p:ajax event="itemSelect" update="moduleTitle" />
</p:autoComplete>
</p:column>
</p:row>
This works fine, but what I want is clear the moduleTitle field when the autocomplete field is empty. Any idea? I tried to add <p:ajax event="keyup" listener="#{...}" /> but the backing bean method wasn't called. And I also have no idea on how to get the string length of autocomplete field from ajax.
Add p:ajax with keyup event along with p:ajax of itemSelect event on your p:autoComplete component to update the respect fields as following:
<p:autoComplete id="moduleCode" value="#{classroomBean.classroom.module}"
completeMethod="#{classroomBean.completeModule}" dropdown="true"
forceSelection="true" converter="entityConverter" maxResults="15"
required="true" requiredMessage="Module is required."
var="module" itemValue="#{module}" itemLabel="#{module.moduleCode}">
<p:ajax event="keyup" update="moduleTitle" />
<p:ajax event="itemSelect" update="moduleTitle" />
</p:autoComplete>

PrimeFaces SelectOneMenu not updating values after ajax update

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.

JSF Show PanelGrid row/items based on selectone menu

I'm have a submit form and would like to display a row where they enter a birthdate if the relationship selected is a son or daughter.
I finally got things to work but it feels clunky and verbose with the use <p:row> Plus I couldn't get the update to work unless I used #form which then required the extra <p:ajax> on first/last name textinputs since their values would disappear if entered before a selection in the drop down was made.
This works but seems verbose
<h:form id="form2">
<p:panel header="Add a Non-Member">
<p:panelGrid>
<p:row>
<p:column>
<h:outputLabel for="fname" value="First Name: " />
</p:column>
<p:column>
<p:inputText id="fname" required="true"
value="#{memberManager.newNonMember.first_name}" >
<p:ajax update="#form" />
</p:inputText>
</p:column>
<p:column>
<p:message for="fname"></p:message>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputLabel for="lname" value="Last Name: " />
</p:column>
<p:column>
<p:inputText id="lname" required="true"
value="#{memberManager.newNonMember.last_name}" >
<p:ajax update="#form" />
</p:inputText>
</p:column>
<p:column>
<p:message for="lname"></p:message>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Relationship: " />
</p:column>
<p:column>
<p:selectOneMenu id="relationship" value="#{memberManager.newNonMember.type}" required="True"
requiredMessage="Relationship is required for non-member">
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{memberManager.relationTypes}" var="type" itemValue="#{type}" itemLabel="#{type.label}" />
<p:ajax update="#form" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:message for="relationship" />
</p:column>
</p:row>
<p:row id="birthrow">
<p:column>
<h:outputLabel for="nm_birth_date" value="#{memberManager.newNonMember.type.label}'s Birthdate: "
rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}" />
</p:column>
<p:column>
<p:calendar id="nm_birth_date" showOn="button" navigator="true" value="#{memberManager.newNonMember.birth_date}"
rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
required="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
pattern="MM/dd/yyyy" mask="true"
requiredMessage="Your #{memberManager.newNonMember.type.label}'s Birthdate is required" />
</p:column>
<p:column>
<p:message for="nm_birth_date"></p:message>
</p:column>
</p:row>
</p:panelGrid>
<br />
<p:commandButton value="Add" action="#{memberManager.addAction}" ajax="false" />
</p:panel>
</h:form>
When I kept the panelGrid but used update="birthrow" on just the selectOneMenu ajax and removed the inputText ajax the birthdate row didn't update as expected, including after form was submitted with errors (ie last name required, then the ajax update stopped working)
Originally I wasn't using p:row or p:column but instead the columns attribute on the panel grid. But based on this How to rendered <p:selectOneMenu> by BalusC I knew I needed a wrapper component which is why I went the p:row route.
But is there a cleaner way to not use all the p:rows and extra ajax on the text inputs?
You could just have wrapped individual cells in a <h:panelGroup> without the need for all that <p:row><p:column> verbosity.
<h:panelGroup id="birthdateLabel">
<h:outputLabel ... />
</h:panelGroup>
<h:panelGroup id="birthdateInput">
<p:calendar ... />
</h:panelGroup>
<p:message ... />
To update them, just use update="birthdateLabel birthdateInput".

ajax event not firing in JSF

I can't get the Ajax event to fire and call the actionListener or make the second select one update itself. What am I missing?
<p:selectOneMenu value="#{player}"
converter="playerConverter" id="playerList">
<f:selectItem itemLabel="---" noSelectionOption="true" />
<f:selectItems value="#{servicePlayer.allPlayers}"
var="n"
itemValue="#{n}"
itemLabel="#{n.combinedName}"
itemLabelEscaped="true"/>
<p:ajax event="change" execute="#this" actionListener="#
{serviceHCP.getClubs(player) }" update="ClubMenu" />
</p:selectOneMenu>
<h:outputText value="Klubb"></h:outputText>
<!-- h:outputText value="#{ serviceHCP.myClubList.size()}" / -->
<p:selectOneMenu id="ClubMenu" value="#{serviceHCP.myCurrentClub}" rendered="#{not empty serviceHCP.myClubList}"
converter="clubConverter">
<f:selectItems value="#{serviceHCP.myClubList}"
var="clb"
itemValue="#{clb}"
itemLabel="#{clb.name}"
itemLabelEscaped="true"/>
</p:selectOneMenu>
<h:outputText value="Serietyp"></h:outputText>
Very stupid misstake
selectOneMenu ajax events
it's not called actionListener it's called listener.
wrong
<p:ajax event="change" execute="#this" actionListener="#{serviceHCP.getClubs(player) }" update="ClubMenu" />
correct
<p:ajax event="change" execute="#this" listener="#
{serviceHCP.getClubs(player) }" update="ClubMenu" />

Resources