I have 2 fields in a jsf form. Field 1 uses rich:autocomplete, and field 2 uses inputText. I type invalid data in field 2 so that the validation message appears. Next, I start typing in field 1. As soon as I do this, the validation message in field 2 disappears. How can I prevent this?
<h:outputLabel value="Field 1:" escape="false"/>
<h:panelGroup>
<rich:autocomplete id="id1" mode="ajax" showButton="false"
autocompleteMethod="#{bean.method}"
autocompleteList="#{bean.aList}"
value="#{bean.field}"
required="true"
requiredMessage="Field 1 required">
<a4j:ajax event="blur" execute="#this" bypassUpdates="#{true}" render="id1,id1Msg" />
</rich:autocomplete>
<rich:message for="id1" id="id1Msg" />
</h:panelGroup>
<h:outputLabel for="id2" value="Field 2:"/>
<h:panelGroup>
<h:inputText id="id2" value="#{bean.field2}" style="width: 175px;" required="true" requiredMessage="Field 2 required" validatorMessage="Field 2 Please enter digits only" converterMessage="Field 2 - Please enter digits only">
<f:ajax event="change" execute="#this" bypassUpdates="#{true}" render="id2Msg"/>
</h:inputText>
<rich:message for="id2" id="id2Msg"/>
</h:panelGroup>
Set execute="#form" on id2. This will cause id2 to always trigger the submission of the entire form, even when it loses focus, causing the validation message to appear
execute="#this" on id2 as it stands means that only the parent component will be triggered
I got the desired behaviour by using execute="#form" on id1.
Related
I'm new to jsf and not sure how to frame the question in a right way. I'm doing a name lookup functionality and my input form is as follows:
Accept input from a text field.(Backed by managed bean and
getters and setters)
Invoke the action using command button.
Display it back on the UI.
I'm not able to paste the entire code because of confidentiality.
<h:form>
<p:outputLabel value="ABC" />
<p:inputText id="a" value="#{mybean.variable}" size="10" />
<p:commandButton value="Check" actionListener="#{mybean.getName()}" update="name">
</p:commandButton>
<p:inputText id="name" value="#{mybean.Value}" />
</h:form>
The above mentioned works fine,However I have 5 input text fields and their corresponding action methods like as follows:
<p:outputLabel value="DEF" />
<p:inputText id="b" value="#{mybean.variable1}" size="10" />
<p:commandButton value="Check" actionListener="#{mybean.getName()}" update="name" >
</p:commandButton>
<p:inputText id="name" value="#{mybean.Value}" />
</h:form>
and so on.
When I put all the text boxes and their corresponding actions,the input is not passed to the backend and the console does not display anything.
Any help appreciated.
Thanks.
I'm trying to help users fill in entity Id numbers on a submittal form. I can't use a pulldown because there are 1000's.
In a PF dialog, I'm able to copy a selected value to the main form but I'm hardcoding the actionaListener into the commandLink to tell the popup dialog which h:textInput box on the main form to copy the value to and to render. If I have three h:inputText boxes I would then need to duplicate three p:dialogs.
For example in my p:dialog I would have a column in the datatable as such:
<h:commandLink value="Select This Item" onclick="PF('dlg').hide()">
<f:ajax render=":myForm:text_field_1" event="click"
listener="#{bean.popDownId1(item.id)}" />
</h:commandLink>
How can I pass those variables myForm:text_field_1 (the form name and field) to the p:dialog so that it becomes a more generic popup dialog? Also is there a way to not have to code a listener method for each field (popDownId1, popDownId2, etc...)As a bonus I'd also like to externalize the dialog and include it in every xhtml page instead of cutting and pasting as I'm doing now.
Here is more actual code:
form.xhtml
<h:form id="myForm">
<h:panelGrid columns="3">
<p:outputLabel value="Manager Employee Number: " />
<h:panelGroup>
<p:inputText id="managerId"
title="Type Employee Id or click the ? to search for their Id"
value="#{bean.department.manager}" >
<f:validator validatorId="com.company.app.EmployeeIdValidator" />
</p:inputText>
<p:commandButton title="Click here if you don't know their Employee Number"
id="managerId" value="Lookup Id"
onclick="PF('dlgManager').show();" type="button" >
</p:commandButton>
other fields and submit button
</h:form>
<p:dialog id="popup" modal="false" widgetVar="dlgManager" dynamic="true" >
<f:facet name="header">
<h:outputText value="Employee Number Finder" />
</f:facet>
<p>Search using any keyword.</p>
<h:form>
Keyword: <p:inputText id="search" value="#{employeeSearch.searchString}" />
<p:commandButton value="Search"
action="#{employeeSearch.searchByKeyword}">
<f:ajax execute="#form" render="output" />
</p:commandButton> (Enter keywords separated by spaces)
<p:dataTable id="output" var="employee" value="#{employeeSearch.employees}">
<p:column headerText="Action">
<h:commandLink value="Select" onclick="PF('dlgManager').hide()">
<f:ajax render=":myForm:managerId" event="click"
listener="#{bean.popDownManagerId(employee.id)}" />
</h:commandLink>
</p:column>
other columns(employee name, phone number, etc...)
</p:dialog>
you can see that I'd need to copy the dialog and tweak it a bit for every field on my form where I want to do an employee number lookup.
onclick="PF('dlgManager').show();">
onclick="PF('dlgSupervisor').show();">
onclick="PF('dlgFloorChief').show();">
EDIT
When applying BalusC's answer, if I add a second lookup Id button, the popup dialog to select an employee id has a command link which is tied to only the ManagerId field
action="#{bean.popDownManagerId(employee.id)}"
Also, when the second lookup id button is pressed the previous search results are still listed so the select command link would be referencing the wrong field to update
popup dialog
I'm using primefaces with jsf and i want to make one of two fields required at least. that means that the error message will be displayed if this two fields are empties togheter:
this is a sample of my code:
<h:outputLabel for="srcNumber" value="Originator MSISDN (EXAMPLE 32495959595)" />
<p:inputText id="srcNumber" value="#{cdrMmscRecBean.srcNumber}" label="srcNumber" />
<h:outputLabel for="destNumber" value="Destination MSISDN (EXAMPLE 32495959595)" />
<p:inputText id="destNumber" value="#{cdrMmscRecBean.destNumber} label="destNumber" />
thanks :)
You can implement it this way:
<p:inputText id="srcNumber" value="#{cdrMmscRecBean.srcNumber}" label="srcNumber"
required="#{empty cdrMmscRecBean.destNumber}" requiredMessage="SRC Number Required">
<p:ajax event="change" update="destNumber" />
</p:inputText>
<p:inputText id="destNumber" value="#{cdrMmscRecBean.destNumber}" label="destNumber"
required="#{empty cdrMmscRecBean.srcNumber}" requiredMessage="DEST Number Required">
<p:ajax event="change" update="srcNumber" />
</p:inputText>
For more reference on how to parametrize your validation message:
Parametrized Messages in JSF with Facelets Taglib Functions
If you want to show the validation error use <p:message for="srcNumber" />
and same for test number, get rid of your outputLabels, this will show the validations warnings.
You neeed to add the required="true" flag to your inputTexts as well.
This is primefaces
EDIT
Purpose of the h:outputLabel and its "for" attribute this here shows the outputLabel for using non primefaces to show validatoin messages if this is all your problem was then u just need to add the required="true" validation flag indicators on your input texts
I have the following usage of the p:selectOneMenu:
<p:selectOneMenu id="selectField"
value="#{someBean.someField}"
converter="#{selectItemConverter}" var="x" editable="true">
<f:selectItems
value="#{selectItemsBean.getSelectItems(tab, field)}" var="si"
itemLabel="#{si.label}" itemValue="#{si}" />
<p:column>
<h:outputText value="#{si.label}" />
</p:column>
<p:column>
<h:graphicImage library="images" name="noway_16x16.png"
title="#{si.disabledReason}" rendered="#{si.disabled}" />
</p:column>
<p:ajax event="change" update="#form" partialSubmit="true" process="selectField" />
</p:selectOneMenu>
As you can see, I use custom content in combination with editable=true. When I submit the form, the Converter gets the label of a selected item as the value, not the actual value. In the HTML page, the values are correct, e.g. <option value="C">C-style mounting</option>. With editable=false, the correct value (e.g. C is sent to the converter, with editable=true the converter retrieves C-style mounting.
What I want is that the user can either select one of the pre-defined items in the list and the server submits that value of the item OR the user enters something and that is submitted as value. But the current behavior is a bit strange - or am I just wanting too much?
My requirement is like this: I am having a text input and whenever a value change event occurs, a select many list box has to be populated. If there is no matching records found, then a text input has to appear instead of a select many list box.
<h:column>
<h:selectManyListbox size="3" value="#{hostInfoBean.gateKeeperendPointReference}" rendered="#{hostInfoBean.selectManyRendered}" id="gateKeeperendPointReference">
<f:selectItems value="#{hostInfoBean.gateKeeperendPointReferenceItems}" />
</h:selectManyListbox>
<h:inputText id="gateKeeperendPointReferenceText" size="30" rendered="#{!hostInfoBean.selectManyRendered}">
</h:inputText>
</h:column>
Also I am using a4j for the value change listener,
<a4j:support event="onchange" reRender="hostInfo:gateKeeperendPointReference" focus="GFacPath"
ajaxSingle="true" />
'selectManyRendered' is a boolean value which I am determining in the JAVA bean. The program works only for the default value of the boolean variable. If the boolean value is changed during runtime, then the toggle between the visibility of selectManyListbox and inputText is not working. Please help to fix this. Am i missing something?
regards,
Suresh
If the "rendered" attribute resolves to false, then the component isn't in your tree and can't be found as a "rerender" target. When you have components that are rendered conditionally you want to wrap them in a component that is always available as a target, like so:
<h:inputText value="#{myBean.text}" >
<a4j:support event="onkeyup" reRender="listZone" ajaxSingle="true" />
</h:inputText>
<h:panelGroup id="listZone">
<h:selectManyListbox value="#{myBean.list}" rendered="#{myBean.renderList}" >
<f:selectItems value="#{myBean.listItems}" />
</h:selectManyListbox>
<h:inputText size="30" rendered="#{!myBean.renderList}/>
<h:panelGroup id="listZone">