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