f:ajax doesn't update component - jsf

I have a select and I want that when the user doesn't select anything it prints an error. So I use validator and my xhtml code is:
<p:selectOneMenu id="students"
value="#{studentsBean.selectedStudent}"
converter="studentsConverter" effect="fold">
<f:selectItem itemLabel="Select..." itemValue="" />
<f:selectItems value="#{studentsBean.studentsList}"
var="student" itemValue="#{student}"
itemLabel="#{student.name}" />
<p:ajax event="change" update="students" process="#this" />
<f:validator validatorId="studentNotNull" />
<f:ajax execute="#this" render="studentPanel"/>
</p:selectOneMenu>
<h:panelGroup id="studentPane">
<h:message for="students" style="color:red" />
</h:panelGroup>
The problem is that if I don't select anythin it print me "The students is not selected" while I choice an student the label it doesn't disappear.
the validatior works and I don't think I must write the code.
Anyone can help?

Can you try this
<p:selectOneMenu id="students"
value="#{studentsBean.selectedStudent}"
converter="studentsConverter" effect="fold"
required="true" requiredMessage="Student is required">
<f:selectItem itemLabel="Select..." noSelectionOption="true"/>
<f:selectItems value="#{studentsBean.studentsList}"
var="student"
itemValue="#{student}"
itemLabel="#{student.name}" />
</p:selectOneMenu>
Add in your form
<p:growl id="msgs" showDetail="true" life="3000"/>
and of course, update msgs in form submit

Related

blank space JSF not rendered components

I have the following code:
<h:form id="mainForm">
<p:panelGrid columns="2" layout="grid">
<h:panelGroup styleClass="containers" layout="block">
<p:outputLabel for="document" value="Document" />
<p:inputText id="document"
value="#{dIGRCController.digrc.documento}" readonly="true" />
<h:link styleClass="searchLink" value="Search Documents"
outcome="searchDigrc.xhtml"></h:link>
<!-- #{dIGRCController.digrc.impresn == 'S'} -->
<p:outputLabel for="concept" value="Concept" />
<p:selectOneMenu id="concept"
value="#{dIGRCController.digrc.qconce}"
requiredMessage="You must select a Concept" required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItems
value="#{cCRX1Controller.ccrx1.concepts.entrySet()}"
var="concept" itemValue="#{concept.key}"
itemLabel="#{concept.value.tbdesc}" />
<p:ajax listener="#{dIGRCController.setDropDownSelectedCcrx1}"
update="hiddenSections, searchAgentsLink, agenteName, documentValue, containerDocQty, containerMethodPayment" />
</p:selectOneMenu>
<p:outputLabel for="todaysDate" value="Date" />
<p:inputText id="todaysDate" readonly="true"
value="#{dIGRCController.digrc.fecha}" />
</h:panelGroup>
<h:panelGroup styleClass="containers" layout="block">
<h:panelGroup>
<p:outputLabel for="agenteName" value="Agent Name" />
<p:inputText id="agenteName"
readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
value="#{dIGRCController.digrc.nombre}" required="true"
requiredMessage="You must enter an Agent Name" />
<h:panelGroup id="searchAgentsLink">
<h:link styleClass="searchLink" value="Search Agents"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
outcome="searchAgex1">
<f:param name="concept" value="#{dIGRCController.digrc.qconce}" />
<c:if test="#{not empty dIGRCController.digrc.documento}">
<f:param name="documento"
value="#{dIGRCController.digrc.documento}" />
</c:if>
</h:link>
</h:panelGroup>
</h:panelGroup>
<p:outputLabel for="documentValue" value="Document Value" />
<p:inputText id="documentValue"
value="#{dIGRCController.digrc.documVal}" required="true"
requiredMessage="You must enter a Document Value"
validatorMessage="The Document Value must be greater than 0"
readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 9 or
dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1 or
dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'F'}">
<f:validateDoubleRange minimum="0.01" />
<p:ajax event="change" update="containerIdTwo"></p:ajax>
</p:inputText>
<h:panelGroup styleClass="containers" layout="block"
id="containerDocQty">
<h:panelGroup
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.pideqtysn == 'S'}">
<p:outputLabel for="documentQuantity" value="Document Quantity" />
<p:inputText id="documentQuantity"
value="#{dIGRCController.digrc.qtyDoc}" required="true"
requiredMessage="You must enter a Document Quantity" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:panelGrid>
<p:panelGrid columns="1" layout="grid" id="hiddenSections">
<h:panelGroup styleClass="containers" layout="grid" id="moneyOrder"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1}">
<h2>Money Orders</h2>
<p:outputLabel for="moneyOrdersQty" value="Quantity" />
<p:inputText id="moneyOrdersQty"
value="#{dIGRCController.digrc.moqty}" />
<p:outputLabel for="moneyOrdersVal" value="Value" />
<p:inputText id="moneyOrdersVal"
value="#{dIGRCController.digrc.moval}">
<p:ajax update="documentValue" event="change"
listener="#{dIGRCController.setDocValueToMoneyOrderValue()}" />
</p:inputText>
</h:panelGroup>
<h:panelGroup styleClass="containers" layout="block"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 8}">
<h2>Transfer Documents</h2>
<p:outputLabel for="numeroConduce" value="Transfer Number" />
<p:inputText id="numeroConduce"
value="#{dIGRCController.digrc.notransf}" required="true"
requiredMessage="You must enter a Number." />
<p:outputLabel for="suplidor" value="Supplier" />
<p:inputText id="suplidor" value="#{dIGRCController.digrc.c8supli}"
required="true" requiredMessage="You must enter a Supplier" />
<p:outputLabel for="tipoEnvio" value="Type of Transfer" />
<p:selectOneMenu id="tipoEnvio"
value="#{dIGRCController.digrc.c8tpenvio}"
requiredMessage="You must select a Type of Transfer"
required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItem itemLabel="Regular" itemValue="R" />
<f:selectItem itemLabel="Official" itemValue="O" />
<f:selectItem itemLabel="Express Regular" itemValue="E" />
<f:selectItem itemLabel="Express Official" itemValue="F" />
<p:ajax event="change" update="containerExtraEnvio"></p:ajax>
</p:selectOneMenu>
<p:outputLabel for="envioDestino" value="Destination" />
<p:selectOneMenu id="envioDestino"
value="#{dIGRCController.digrc.c8destino}"
requiredMessage="You must select a Destination" required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItem itemLabel="Capital" itemValue="C" />
<f:selectItem itemLabel="Interior" itemValue="I" />
</p:selectOneMenu>
<h:panelGroup id="containerExtraEnvio">
<h:panelGroup
rendered="#{dIGRCController.digrc.c8tpenvio == 'O' or dIGRCController.digrc.c8tpenvio == 'F'}">
<p:outputLabel for="envioAdicionales" value="Extra" />
<p:inputText id="envioAdicionales"
value="#{dIGRCController.digrc.c8qadi}" required="true"
requiredMessage="You must enter an Extra" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:panelGrid>
</h:form>
Inside the first panelGrid, there is an drop down with ID concept. When an item is selected, this will update the container with ID hiddenSections. If the concept selected is 1, then it should show Money Orders. If the concept is 8, it should show Transfer Documents (see the panelGrid with id hiddenSections).
The image below shows the seven DIV elements that are empty inside. For code clarity, I am only showing two of them (If you wanted to, you should be able to reproduce with two).
Those seven DIV elements represent seven panelGroups that are rendered given the conditions I explained above. When the user first gets to the screen, none of them are rendered because the concept is not yet set. In this case, I see empty spaces which I don't want. How do I get rid of those empty spaces?
In this case, I see empty spaces which I don't want. How do I get rid of those empty spaces?
Your question is vague and I understood it 3 ways ( excuse me if I misunderstood as the answers seems obvious in all cases ).
When a component is not rendered, it doesn't figure in the html at all. So if by empty space you meant space characters then those are outside the tags in question.
If the table generated takes space because of css you want that part to be empty at page load then you can use rendered for that.
I think that one is what you were asking: Since your selectItem is initially null, none of the panelGroup out of the 8 are rendered and you'd like a default one to be rendered when the selected item is at null. Then just include a check to see if the value is empty for your default panelGroup.
Sorry if I misunderstood the question.

How to make required message dissapear when h:selectOneMenu value is changed?

I'm having a trouble with getting rid of required message.
I have a form in which I have a few fields and a button.
When I press a button there is validation that checks if required fields where filled with values if not then required message is displayed for invalid value/component.
Now I want to select a value from selectOneMenu or type something into inputText and when I do that I want the required message to dissapear without need to press the button again.
How would you do that?
I've tried to remove message with sth like this, but it doesn't seems to work:
Iterator<FacesMessage> msgIterator = FacesContext.getCurrentInstance().getMessages();
while (msgIterator.hasNext())
{
FacesMessage facesMessage = msgIterator.next();
msgIterator.remove();
}
Could you help me with that?
Here is example code:
<h:form id="mainForm">
<h:selectOneMenu required="true" id="dictionaryValueId" value="#{SomeBean.dictionarySelectedValue}">
<f:selectItem itemValue="#{null}" itemLabel="#{i18n['view.choose']}" />
<f:selectItems value="#{SomeBeanBean.dictionaryValuesMap}" var="element"
itemLabel="#{element.descripption}" itemValue="#{element.key}" />
<f:ajax event="change" execute="#this msgId" render="msgId dictionaryValueId"/>
</h:selectOneMenu>
<h:message id="msgId" style="display:none;" for="dictionaryValueId" />
...
<h:commandButton value="#{i18n['button.forward.name']}"
actionListener="#{SomeBean.forward}" >
<p:ajax process="#form" update="mainForm"/>
</h:commandButton>
I am not sure, but is not there a problem with
style="display:none;"
for
<h:message id="msgId"/>
You can wrap your message with <h:panelGroup/> and render by this panelGroup Id, this Id will be always present on your form.
<h:form id="mainForm">
<h:selectOneMenu required="true" id="dictionaryValueId" value="#{SomeBean.dictionarySelectedValue}">
<f:selectItem itemValue="#{null}" itemLabel="#{i18n['view.choose']}" />
<f:selectItems value="#{SomeBeanBean.dictionaryValuesMap}" var="element" itemLabel="#{element.descripption}" itemValue="#{element.key}" />
<f:ajax event="change" execute="#this" render="messageBundle1 dictionaryValueId"/>
</h:selectOneMenu>
<h:panelGroup id="messageBundle1">
<h:message id="msgId" style="display:none;" for="dictionaryValueId" />
</h:panelGroup>
<h:commandButton value="#{i18n['button.forward.name']}"
actionListener="#{SomeBean.forward}" >
<p:ajax process="#form" update="mainForm"/>
</h:commandButton>
</h:form>

Display/hide h:panelGrid on the base of value selected in h:selectOneMenu

I want to display and hide a <h:panelGrid> on the basis of the value selected in <h:selectOneMenu>.
The code is:
<p:dialog id="logClassDlg" header="Log Class Teached" widgetVar="logClass" modal="true" >
<h:form>
<p:growl id="growl" showDetail="true" />
<h:panelGrid id="logClassPanelGrd1" columns="2">
<h:outputLabel for="class" value="Class: " />
<h:selectOneMenu id="class" value="#{logClassBean.classLog.classTitle}">
<f:selectItem itemValue="Reading" itemLabel="Reading" />
<f:selectItem itemValue="Memorization" itemLabel="Memorization" />
<f:selectItem itemValue="Translation" itemLabel="Translation" />
<f:selectItem itemValue="Language" itemLabel="Language" />
<f:selectItem itemValue="Grammer" itemLabel="Grammer" />
<f:ajax render="logClassPanelGrdBook" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGrid id="logClassPanelGrdBook" columns="2" rendered="#{(logClassBean.classLog.classTitle ne 'Language') and (logClassBean.classLog.classTitle ne 'Grammar')}">
<p:outputLabel value="Book" />
<h:selectOneMenu id="book" value="#{logClassBean.classLog.classStatus}">
<f:selectItem itemValue="first" itemLabel="first" />
<f:selectItem itemValue="second" itemLabel="second" />
<f:selectItem itemValue="third" itemLabel="third" />
<f:selectItem itemValue="fourth" itemLabel="fourth" />
<f:selectItem itemValue="fifth" itemLabel="fifth" />
</h:selectOneMenu>
</h:panelGrid>
As you can see I want to display the panel grid logClassPanelGrdBook only on when the selected values are not Language and Grammar i.e
rendered="#{(logClassBean.classLog.classTitle ne 'Language') and (logClassBean.classLog.classTitle ne 'Grammar')}"
But the panel grid is displayed irrespective of the values selected, it should hide when the other values (Reading, Memorization and Translation) are selected.
Any help/pointers would be appreciated. Thank you.
The part <f:ajax render="logClassPanelGrdBook" /> won't update and recheck the rendered function of the panelGrid this way. You will need to update its parent element instead.
For example, you can wrap it with <h:panelGroup>:
<h:panelGrid id="logClassPanelGrd1" columns="2">
<h:outputLabel for="class" value="Class: " />
<h:selectOneMenu id="class" value="#{logClassBean.classLog.classTitle}">
<f:selectItem itemValue="Reading" itemLabel="Reading" />
<f:selectItem itemValue="Memorization" itemLabel="Memorization" />
<f:selectItem itemValue="Translation" itemLabel="Translation" />
<f:selectItem itemValue="Language" itemLabel="Language" />
<f:selectItem itemValue="Grammar" itemLabel="Grammar" />
<f:ajax render="logClassPanelGrdBook" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGroup id="logClassPanelGrdBook">
<h:panelGrid columns="2" rendered="#{(logClassBean.classLog.classTitle ne 'Language') and (logClassBean.classLog.classTitle ne 'Grammar')}">
<p:outputLabel value="Book" />
<h:selectOneMenu id="book" value="#{logClassBean.classLog.classStatus}">
<f:selectItem itemValue="first" itemLabel="first" />
<f:selectItem itemValue="second" itemLabel="second" />
<f:selectItem itemValue="third" itemLabel="third" />
<f:selectItem itemValue="fourth" itemLabel="fourth" />
<f:selectItem itemValue="fifth" itemLabel="fifth" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGroup>
I also changed select item value from Grammer to Grammar because it didn't match the value in rendered attribute.
If this doesn't work, you should also check if bean value is properly set when you click <h:selectOneMenu>.

disabled value getting null in bean for p:selectOneMenu

I want to disabled department field based on employeeno.But,I want department value in bean.When,I using disabled value getting null in bean but without using disabled no problem...
<h:outputText value="Employee No"/>
<p:selectOneMenu value="#{salarypromotionBean.salarypromotiondto.employeeNo}" id="emp" style="width:163px;">
<f:selectItem itemLabel="select" itemValue="0" />
<f:selectItems value="#{salarypromotionBean.empid}"/>
<p:ajax event="change" listener="#{salarypromotionBean.currentSalaryAmount}" update="salaryIncrement,empN,empDoj,basic,da,empNewDesig,commonSalaryIncrement"/>
</p:selectOneMenu>
<h:outputText value="Department" />
<p:selectOneMenu value="#{salarypromotionBean.salarypromotiondto.department}" id="empDept" disabled="#{salarypromotionBean.designationDiaspleValue}"
style="width:163px;">
<f:selectItems value="#{salarypromotionBean.deptname}" />
</p:selectOneMenu>
You can do this.
<p:selectOneMenu value="#{salarypromotionBean.salarypromotiondto.department}" id="empDept" rendered="#{!salarypromotionBean.designationDiaspleValue}"
style="width:163px;">
<f:selectItems value="#{salarypromotionBean.deptname}" />
</p:selectOneMenu>
<p:inputText value="#{salarypromotionBean.salarypromotiondto.department}" readonly="true" rendered="#{salarypromotionBean.designationDiaspleValue}"/>

JSF selectonemenu does not update

i am beginner in JSF ,i have a problem with selectonemenu item.When i choose the an item ,for example ' FirstLabel',outputpanel should be shown.However ,selectone menu does not update my choice.I use primefaces 3.1 library.How can i solve this problem.Thanks for helps.
<p:selectOneMenu value="#{denemeView.str}" effect="fold" editable="true" >
<f:selectItem itemLabel="Please choose!." itemValue="" />
<f:selectItem itemLabel="FirstLabel" itemValue="1" />
<f:selectItem itemLabel="SecondLabel" itemValue="2" />
<p:ajax process="#this" update=":Form2:panel1"/>
<p:ajax process="#this" update=":Form2:panel2"/>
</p:selectOneMenu>
</p:outputPanel>
<p:outputPanel id="panel1" rendered="#{denemeView.str=='1'}">
<h:outputText value="Output: * " />
<p:inputText id="out" value="#{denemeView.islem}" />
</p:outputPanel>
<p:outputPanel id="panel2" rendered="#{denemeView.str=='2'}">
<h:outputText value="True choice! " />
</p:outputPanel>
If a JSF component has rendered="false" set then it's not redered (the component object is not present in the object tree) and cannot be updated using <p:ajax update="someId"/> or <f:ajax render="someId"/>. What you need to do is wrap these two panels in an outer panel and update that one. Something like this:
<p:ajax process="#this" update="outerPanel"/>
...
<p:outputPanel id="outerPanel">
<p:outputPanel id="panel1" rendered="#{denemeView.str=='1'}">
<h:outputText value="Output: * " />
<p:inputText id="out" value="#{denemeView.islem}" />
</p:outputPanel>
<p:outputPanel id="panel2" rendered="#{denemeView.str=='2'}">
<h:outputText value="True choice! " />
</p:outputPanel>
</p:outputPanel>
See here for a similar problem.

Resources