ajax event not firing in JSF - ajax

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

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

Can't update view through ajax request

The method is invoked in server side, the fields are updated in managed bean but the view doesn't update.
<h:panelGroup id="grupoPergunta" rendered="#{gameController.view.mostrarPergunta}">
<h:outputLabel id="pergunta" readonly="true" value="#{gameController.view.pergunta.descricao}" />
<h:selectOneRadio styleClass="centro" value="#{gameControllerView.repostaEscolhida}">
<f:selectItem itemValue="#{gameController.view.r1.alternativa}" itemLabel="#{gameController.view.r1.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r2.alternativa}" itemLabel="#{gameController.view.r2.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r3.alternativa}" itemLabel="#{gameController.view.r3.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r4.alternativa}" itemLabel="#{gameController.view.r4.descricao}"></f:selectItem>
</h:selectOneRadio>
</h:panelGroup>
<!-- span onclick="sortearDado();"> Girar dado</span-->
<a4j:commandButton value="Pergunta" action="#{gameController.buscarPergunta()}" onclick="sortearDado();" render="grupoPergunta pergunta"/>
I also tried using <f:ajax> but no effect.
I put the most rerendered internally and used in the render , it managed to solve my problem
<a4j:outputPanel id="painelPergunta">
<h:outputLabel id="pergunta" readonly="true" value="#{gameController.view.pergunta.descricao}" rendered="#{gameController.mostraPergunta}"/>
<h:selectOneRadio style="border:0px;" styleClass="centro" value="#{gameControllerView.repostaEscolhida}" rendered="#{gameController.mostraPergunta}">
<f:selectItem itemValue="#{gameController.view.r1.alternativa}" itemLabel="#{gameController.view.r1.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r2.alternativa}" itemLabel="#{gameController.view.r2.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r3.alternativa}" itemLabel="#{gameController.view.r3.descricao}"></f:selectItem>
<f:selectItem itemValue="#{gameController.view.r4.alternativa}" itemLabel="#{gameController.view.r4.descricao}"></f:selectItem>
</h:selectOneRadio>
</a4j:outputPanel>
<h:commandButton value="Pergunta2" onclick="sortearDado();">
<f:ajax execute="#form" event="click" render="painelPergunta" listener="#{gameController.buscarPergunta()}"></f:ajax>
</h:commandButton>

<p:selectOneMenu> onChange event doesn't reload 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" />

How to stop firing the ajax event everytime i click on p:selectOneMneu arrow icon?

I have a p:selectOneMenu tag inside a datatable + an onRowSelect event on the p:datatable. My problem is the rowSelect event gets fired everytime i click the down arrow inside the icon # the right of the select menu. Which of course does some rerendering so the menu opens for a blink of an eye then closes again on rerendering. This issue does not happen when i click on the body of the select menu, which of course is not acceptable. Any Ideas? I can replace with h:selectOneMenu which behaves normally and doesn't fire the selection. However i need the filtering attributes of the p:selectOneMenu.
Here's the code sample :
<p:dataTable id="inParametersDataTable" selection="#{wFDesignBean.selectedParameter}"
selectionMode="single" rowKey="#{p.parameterDefinitionModel.parameterId}"
value="#{wFDesignBean.selectedActivityModel.inParameterModels}"
style="height: 100%; " var="p" >
<p:ajax global="false" event="rowSelect" listener="#{wFDesignBean.loadSelectedParameter}"
update=":cont:tabView:bottomTabView" />
<p:ajax global="false" event="rowUnselect" listener="#{wFDesignBean.clearAllParameterChoices()}" update=":cont:tabView:bottomTabView"/>
<f:facet id="facetId" name="header" >
<h:commandButton id="addNewParam" label="Add New Input Parameter" image="/styling/images/add.png" style="height:15px;" >
<p:ajax global="false" event="click" listener="#{wFDesignBean.addInParameterToSelectedActivity}" update="inParametersDataTable"/>
</h:commandButton>
<h:commandButton label="Reload current parameters list" image="/styling/images/refresh.png" style="height:15px;" >
<p:ajax event="click" listener="#{wFDesignBean.reloadParameters()}" update="inParametersDataTable"/>
</h:commandButton>
<h:commandButton label="Create a new parameter" image="/styling/images/createNew.png" style="height:15px;" >
<p:ajax global="false" event="click" listener="#{navigationBean.showParametersDialog}" update=":cont:tabView:bottomTabView"/>
</h:commandButton>
</f:facet>
<p:column>
<h:commandButton id="delete" image="/styling/images/Delete-icon.png" style="height:15px;">
<p:ajax global="false" event="click" listener="#{wFDesignBean.removeInParam(p)}" update=":cont:tabView:bottomTabView"/>
</h:commandButton>
</p:column>
<p:column headerText="Parameter Name">
<h:selectOneMenu id="paramValues" value="#{p.parameterDefinitionModel.parameterId}" >
<f:selectItem itemValue="#{wFDesignBean.defaultDropDownValue}" itemLabel="--Select Parameter--"/>
<f:selectItems value ="#{wFDesignBean.paramSourceDef}" var="pra" itemLabel="#{pra.parameter_Name}" itemValue="#{pra.parameter_ID}"/>
<p:ajax event="change" listener="#{wFDesignBean.loadSelectedParameterDefinitionData(p.parameterDefinitionModel.parameterId)}" update=":cont:tabView:bottomTabView" />
</h:selectOneMenu>
</p:column>
<p:column headerText="Data Source">
<h:selectOneMenu id="ddsValues" value="#{p.parameterSourceId}">
<f:selectItem itemLabel="None" itemValue="0"/>
<f:selectItems value ="#{wFDesignBean.dataSourceValues}" var="ds" itemLabel="#{ds.lookupValue}" itemValue="#{ds.lookupId}"/>
<p:ajax global="false" event="change" listener="#{wFDesignBean.handleParameterChoices(p)}" update=":cont:tabView:bottomTabView"/>
</h:selectOneMenu>
</p:column>
<p:column headerText="Is Optional">
<h:selectOneMenu id="isOptional" value="#{p.isOptional}">
<f:selectItems value ="#{wFDesignBean.isOptionalLookUp}" var="optional" itemLabel="#{optional.lookupValue}" itemValue="#{optional.lookupId}"/>
<p:ajax global="false" event="change" update=":cont:tabView:bottomTabView"/>
</h:selectOneMenu>
</p:column>
<p:column headerText="Already built">
<h:selectBooleanCheckbox value="#{p.isAlreadyBuiltBool}">
<p:ajax global="false" listener="#{wFDesignBean.setAlreadyBuilt()}"/>
</h:selectBooleanCheckbox>
</p:column>
</p:dataTable>

Resources