Make a h:inputText required only when the checkbox is selected - jsf

I have a datatable with rows containing some input text fields that are required. Each row also has a check box called delete. I want to have the required = "true" only when the check box is selected. How can I achieve this?

Just let the input's required attribute check the checkbox's value.
Here's a kickoff example:
<h:form>
<h:dataTable value="#{bean.list}" var="item">
<h:column><h:selectBooleanCheckbox binding="#{checkbox}" /></h:column>
<h:column><h:inputText id="input" value="#{item.value}" required="#{checkbox.value == 'true'}" /></h:column>
<h:column><h:message for="input" /></h:column>
</h:dataTable>
<h:commandButton value="submit" action="#{bean.submit}" />
</h:form>

Related

Setting a SelectOneListbox default selection, which is populated from a hashmap

I have a selectOneListBox that is populated with a hashmap's key as the label and the value as the value.
How do i set the first object in the list as the default selection, so it looks highlighted
<!--the list box containing the results from the search-->
<h:form id="newPointsResultList" styleClass="simpleformstyle">
<p:selectOneListbox id="selectedPoints_listbox"
value="#{mapBean.selectedPoint}"
converter="omnifaces.SelectItemsConverter"
scrollHeight="395"
styleClass="simpleformstyle10"
rendered="#{not empty mapBean.newPointsHashMap}" >
<f:selectItems value="#{mapBean.newPointsHashMap}" />
<p:ajax listener="#{mapBean.valueChanged}" update=":newPointsGrid:selectedPoint_grid" process="#this" />
<f:param name="idUser" value="#{mapBean.tipTourUser.idUser}" />
</p:selectOneListbox>
</h:form>
<br />
I set the mapBean.selectedPoint to the value of the first object in the hashmap, and then the selectOneListBox highlights the default selection

Ajax-update a component in h:column header from inside a cell

I have datatable with checkboxes on each row and a single checkbox on table column to check/uncheck all.
<h:dataTable id="datatable1">
<h:column headerClass="center-checkbox">
<f:facet name="header">
<h:selectBooleanCheckbox value="#{bean.tbl.checkAll}" id="checkAllSelector">
<f:ajax render="datatable1 "/>
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox value="#{bean.tbl.checked[r]}">
<f:ajax render="checkAllSelector"/>
</h:selectBooleanCheckbox>
</h:column>
</h:dataTable>
I want to re-render checkAllSelector on every checkbox click in table row but
<f:ajax render="checkAllSelector"/>
is transalated to this (for each row)
onclick="mojarra.ab(this,event,'valueChange',0,'datatable1-1-checkAllSelector')"
onclick="mojarra.ab(this,event,'valueChange',0,'datatable1-2-checkAllSelector')"
onclick="mojarra.ab(this,event,'valueChange',0,'datatable1-3-checkAllSelector')"
and it should be
onclick="mojarra.ab(this,event,'valueChange',0,'datatable1-checkAllSelector')"
onclick="mojarra.ab(this,event,'valueChange',0,'datatable1-checkAllSelector')"
onclick="mojarra.ab(this,event,'valueChange',0,'datatable1-checkAllSelector')
How to avoid preapending this id of each checkbox
The form tag has prependId="false"

How to pass knowledge of what button was pressed to a p:dialog

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

p:selectOneMenu, custom content and editable=true

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?

Dynamically changing the visibility of the JSF components

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

Resources