I am using PrimeFaces 5.2 to render a radio button group for gender. This is for an internal network so will only run on IE11 browsers in compatibility mode. When I select one of the radio buttons by pressing space the button is correctly activated but I don't know where the focus has gone. If I press TAB I got to the first item that I set the tabindex for, but if I press SHIFT-TAB focus does not go to the previous element that I set the tabindex on but goes to a button that I did not set the tabindex on and is also not the first or last element in the default tab order (it is not the first or last element added to the page).
The element before the gender radio buttons is included, the calendar button is what is getting selected with SHIFT-TAB The JSF (with sensitive information removed) is as follows:
<tr>
<td>
<h:outputText value="#{enr['birth.date']}"/>*:
</td>
<td>
<p:calendar id="birthDate" value="#{II.birthdate}" mode="popup" showOn="button" popupIconOnly="true" pattern="yyyy-MM-dd" mask="9999-99-99" maxdate="#{UserBean.currentDate}" yearrange="c-120" navigator="true" showButtonPanel="true" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['birth.date']}" tabindex="4"/>
<p:tooltip for="birthDate" value="yyyy-MM-dd" showEffect="fade" hideEffect="fade" />
</td>
</tr>
<tr>
<td>
<h:outputText value="#{enr['other.last.names']}"/> / <h:outputText value="#{enr['maiden.name']}"/>
</td>
<td>
<p:commandButton icon="ui-icon-plus" title="Icon Only" tabindex="5" immediate="true">
<f:ajax listener="#{II.addOtherName()}" immediate="true" render="otherNameFields"/>
</p:commandButton>
<h:dataTable id="otherNameFields" value="#{II.otherNames}" var="otherNameField">
<h:column size="30" maxlength="50">
<h:inputText value="#{otherNameField.otherName}" tabindex="6">
<f:ajax event="change" listener="#{II.populateName()}" immediate="true" render="otherNameFields" />
</h:inputText>
</h:column>
<h:column>
<p:commandButton icon="ui-icon-trash" title="Icon Only" immediate="true" tabindex="6">
<f:ajax listener="#{II.deleteOtherName(otherNameField)}" immediate="true" render="otherNameFields" />
</p:commandButton>
</h:column>
</h:dataTable>
</td>
</tr>
<tr>
<td>
<h:outputText value="#{enr['gender']}"/>*:
</td>
<td>
<p:selectOneRadio value="#{II.gender}" tabindex="7" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['gender']}" style="border-style: none !important;">
<f:selectItem itemValue="2" itemLabel="#{enr['male']}"/>
<f:selectItem itemValue="1" itemLabel="#{enr['female']}"/>
</p:selectOneRadio>
</td>
</tr>
I also did a plain non-JSF version for comparison which works as expected so I am certain the problem is in the JSF.
Plain HTML below:
<html>
<body>
<p>Non Index:<input type="text" /></p>
<p>Index #200:<input tabindex="200" type="text" /></p>
<p><input name="gender" tabindex="201" id="gender_male" type="radio" value="2" />Male</p>
<p><input name="gender" tabindex="201" id="gender_female" type="radio" value="1" />Female</p>
<p>Index #202:<input tabindex="202" type="text" /></p>
</body>
</html>
I
This can be fixed by using plain JSF version of the selectOneRadio, ie:
<h:selectOneRadio value="#{II.gender}" tabindex="7" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['gender']}" style="border-style: none !important;">
<f:selectItem itemValue="2" itemLabel="#{enr['male']}"/>
<f:selectItem itemValue="1" itemLabel="#{enr['female']}"/>
</h:selectOneRadio>
where:
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
Related
I am using Primefaces 5.2 on an internal network that uses IE11 in compatibility mode. I have a button and a table. When I press the button I get a new row in the table just fine but I also get an empty table <table></table> inserted between the button and the table. This happened each and every time I press the button - three presses three unwanted empty tables.
Sanitized JSF source follows:
<tr>
<td>
<h:outputText value="#{enr['birth.date']}"/>*:
</td>
<td>
<p:calendar id="birthDate" value="#{II.birthdate}" mode="popup" showOn="button" popupIconOnly="true" pattern="yyyy-MM-dd" mask="9999-99-99" maxdate="#{UserBean.currentDate}" yearrange="c-120" navigator="true" showButtonPanel="true" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['birth.date']}" tabindex="4"/>
<p:tooltip for="birthDate" value="yyyy-MM-dd" showEffect="fade" hideEffect="fade" />
</td>
</tr>
<tr>
<td>
<h:outputText value="#{enr['other.last.names']}"/> / <h:outputText value="#{enr['maiden.name']}"/>
</td>
<td>
<p:commandButton icon="ui-icon-plus" title="Icon Only" tabindex="5" immediate="true">
<f:ajax listener="#{II.addOtherName()}" immediate="true" render="otherNameFields"/>
</p:commandButton>
<h:dataTable id="otherNameFields" value="#{II.otherNames}" var="otherNameField">
<h:column size="30" maxlength="50">
<h:inputText value="#{otherNameField.otherName}" tabindex="6">
<f:ajax event="change" listener="#{II.populateName()}" immediate="true" render="otherNameFields" />
</h:inputText>
</h:column>
<h:column>
<p:commandButton icon="ui-icon-trash" title="Icon Only" immediate="true" tabindex="6">
<f:ajax listener="#{II.deleteOtherName(otherNameField)}" immediate="true" render="otherNameFields" />
</p:commandButton>
</h:column>
</h:dataTable>
</td>
</tr>
Here is the generated output I see in the DOM Explorer:
<tr>
<td>
<button name="dataForm:j_id605621413_2_2c601363" tabindex="5" title="Icon Only" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" id="dataForm:j_id605621413_2_2c601363" role="button" aria-disabled="false" onclick="PrimeFaces.bcn(this,event,[function(event){jsf.ajax.request('dataForm:j_id605621413_2_2c601363',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'click'})},function(event){PrimeFaces.ab({s:"dataForm:j_id605621413_2_2c601363"});return false;}]);" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-plus"></span><span class="ui-button-text ui-c">ui-button</span></button>
<table></table> <!-- the unwanted table element -->
<table id="dataForm:otherNameFields">
<tbody id="dataForm:otherNameFields:tbody_element">
<tr><td><input name="dataForm:otherNameFields:0:j_id605621413_2_2c6013ca" tabindex="6" id="dataForm:otherNameFields:0:j_id605621413_2_2c6013ca" onchange="jsf.ajax.request('dataForm:otherNameFields:0:j_id605621413_2_2c6013ca',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'change'})" type="text" value=""></td><td><button name="dataForm:otherNameFields:0:j_id605621413_2_2c601007" tabindex="6" title="Icon Only" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" id="dataForm:otherNameFields:0:j_id605621413_2_2c601007" role="button" aria-disabled="false" onclick="PrimeFaces.bcn(this,event,[function(event){jsf.ajax.request('dataForm:otherNameFields:0:j_id605621413_2_2c601007',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'click'})},function(event){PrimeFaces.ab({s:"dataForm:otherNameFields:0:j_id605621413_2_2c601007"});return false;}]);" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-trash"></span><span class="ui-button-text ui-c">ui-button</span></button></td></tr>
</tbody></table>
</td>
</tr>
Any
I have a scenario where i have a form with fields mobile phone, home phone and office phone. each field has a corresponding radio button named preferred line. only one or the three radio is selectable. and when selected alone the field should be required. so i framed the code like below.
<table class="addaccount-table" cellpadding="0" cellspacing="0"
border="0">
<tr>
<td><label><h:outputText value="Home Phone" /></label></td>
<td><h:inputText id="homePhone" maxlength="14"
value="#{Controller.ContactPageBean.homePhone}"
required="#{not empty Controller.ContactPageBean.homePhoneSelected}"
requiredMessage="Preferred phone is required">
</h:inputText> <br /> <h:message for="homePhone" style="color:red"></h:message></td>
<td><h:selectOneRadio id="homePhoneSelectedId"
styleClass="addacountradio"
value="#{Controller.ContactPageBean.homePhoneSelected}">
<f:selectItem itemValue="Home" itemLabel="Preferred" />
<f:ajax render="homePhone" />
</h:selectOneRadio></td>
</tr>
<tr>
<td><label><h:outputText value="Office Phone" /></label></td>
<td><h:inputText id="officePhone" maxlength="14"
value="#{Controller.ContactPageBean.officePhone}"
required="#{not empty Controller.ContactPageBean.officePhoneSelected}"
requiredMessage="Preferred phone is required">
</h:inputText> <br /> <h:message for="homePhone" style="color:red"></h:message></td>
<td><h:selectOneRadio id="officePhoneSelectedId"
styleClass="addacountradio"
value="#{Controller.ContactPageBean.officePhoneSelected}">
<f:selectItem itemValue="Home" itemLabel="Preferred" />
<f:ajax render="officePhone" />
</h:selectOneRadio></td>
</tr>
<tr>
<td><label><h:outputText value="Mobile Phone" /></label></td>
<td><h:inputText id="mobilePhone" maxlength="14"
value="#{Controller.ContactPageBean.mobilePhone}"
required="#{not empty Controller.ContactPageBean.mobilePhoneSelected}"
requiredMessage="Preferred phone is required">
</h:inputText> <br /> <h:message for="mobilePhone" style="color:red"></h:message></td>
<td><h:selectOneRadio id="mobilePhoneSelectedId"
styleClass="addacountradio"
value="#{Controller.ContactPageBean.mobilePhoneSelected}">
<f:selectItem itemValue="Home" itemLabel="Preferred" />
<f:ajax render="mobilePhone" />
</h:selectOneRadio></td>
</tr>
Now when i clicked the three radio button in row and submit i am getting required error message for the three fields. I expected only the error message which the radio button was currently selected. please help.
You mistype h:message of officePhone as <h:message for="homePhone" style="color:red"> while it should be <h:message for="officePhone" style="color:red"> .
Also, I suggest you edit all <f:selectItem itemValue="Home" itemLabel="Preferred" /> except homephone. For example <f:selectItem itemValue="Office" itemLabel="Preferred" />
I tried this and everything works, check this:
<h:form>
<table class="addaccount-table" cellpadding="0" cellspacing="0"
border="0">
<tr>
<td>
<label><h:outputText value="Home Phone" /></label>
</td>
<td><h:inputText id="homePhone" maxlength="14"
value="#{ContactPageBean.homePhone}"
required="#{not empty ContactPageBean.homePhoneSelected}"
requiredMessage="Home phone is required">
</h:inputText> <br />
<h:message for="homePhone" style="color:red"></h:message>
</td>
<td>
<h:selectOneRadio id="homePhoneSelectedId"
styleClass="addacountradio"
value="#{ContactPageBean.homePhoneSelected}">
<f:selectItem itemValue="Home" itemLabel="Preferred" />
<f:ajax render="homePhone" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>
<label><h:outputText value="Office Phone" /></label>
</td>
<td>
<h:inputText id="officePhone" maxlength="14"
value="#{ContactPageBean.officePhone}"
required="#{not empty ContactPageBean.officePhoneSelected}"
requiredMessage="Office phone is required">
</h:inputText> <br />
<h:message for="officePhone" style="color:red"></h:message>
</td>
<td>
<h:selectOneRadio id="officePhoneSelectedId"
styleClass="addacountradio"
value="#{ContactPageBean.officePhoneSelected}">
<f:selectItem itemValue="Office" itemLabel="Preferred" />
<f:ajax render="officePhone" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>
<label><h:outputText value="Mobile Phone" /></label>
</td>
<td>
<h:inputText id="mobilePhone" maxlength="14"
value="#{ContactPageBean.mobilePhone}"
required="#{not empty ContactPageBean.mobilePhoneSelected}"
requiredMessage="Mobile phone is required">
</h:inputText> <br />
<h:message for="mobilePhone" style="color:red"></h:message>
</td>
<td>
<h:selectOneRadio id="mobilePhoneSelectedId"
styleClass="addacountradio"
value="#{ContactPageBean.mobilePhoneSelected}">
<f:selectItem itemValue="Mobile" itemLabel="Preferred" />
<f:ajax render="mobilePhone" />
</h:selectOneRadio>
</td>
</tr>
</table>
<h:commandButton value="submit" action="#{ContactPageBean.doSome()}"/>
</h:form>
I changed Controller.ContactPageBean as ContactPageBean for simplicity.
Finally, maybe it's better to use checkbox instead of radioButton,isn't it?
I'm currently having a problem with the <p:radioButton> and <p:selectOneRadio>. I'm trying to make a form with three radio buttons with some boxes next to them, this works and the "radio-mechanism" in the buttons work so that only one can be selected at once. However the selected radio button is not propagated to the backend. I've tried putting a <p:ajax> in the <p:selectOneRadio> to make it trigger some sort of call to the backing bean but with no success. I have looked at the following primefaces example: http://www.primefaces.org/showcase/ui/selectOneRadio.jsf
Can someone point me in the right direction to solve this problem?
<p:selectOneRadio id="customRadio" layout="custom" value="advancedSettingsBean.radioValue">
<f:selectItem itemValue="1" />
<f:selectItem itemValue="2" />
<f:selectItem itemValue="3" />
<p:ajax />
</p:selectOneRadio>
<tr>
<td valign="top">
<p:radioButton id="CheckboxValidTimeCurrent" for="customRadio" itemIndex="0">
</p:radioButton>
</td>
<td colspan="2">
<h:outputText value="#{messages.search_advanced_validtimecurren}" />
<br />
</td>
</tr>
<tr>
<td valign="top">
<p:radioButton id="CheckboxvValidTimeDate" for="customRadio" itemIndex="1">
</p:radioButton>
</td>
<td colspan="2">
<h:outputText value="#{messages.search_advanced_validtimedate}" />
<br />
<p:calendar id="singledate" value="#{advancedSettingsBean.singleSearchDate}"
datePattern="yyyy-MM-dd" direction="smart" jointPoint="auto"
inputStyle="width:80px" style="width: 200px">
<f:convertDateTime pattern="yyyy-MM-dd" timeZone="UTC" />
</p:calendar> Z
<br />
<p:message showSummary="true" showDetail="false"
id="singledateError" for="singledate" />
<br />
</td>
</tr>
<tr>
<td valign="top">
<p:radioButton id="CheckboxvValidTimeSpan" for="customRadio" itemIndex="2">
</p:radioButton>
</td>
...
You should put the value of selectoneradio in a el expression:
value="#{advancedSettingsBean.radioValue}"
I'm creating a dynamic form with radio buttons in front of each rows that need to update a cart when a different row is selected :
<t:inputText id="test">
<f:ajax event="click" onevent="alert('3');" />
</t:inputText>
<t:selectOneRadio id="rbtnQuantity" value="#{orderActions.selectedQuantity}" layout="spread">
<f:selectItems value="#{orderActions.quantities}" var="item" />
<f:converter converterId="integerConverter" />
<a4j:ajax event="click" oncomplete="renderPrices();" />
</t:selectOneRadio>
<rich:dataTable id="tblQuantities" styleClass="quantities" value="#{orderActions.formatQuantityPrices}" var="item" rowKeyVar="row">
<h:column>
<t:radio id="rbtnQuantity" for=":form:rbtnQuantity" index="#{row}" />
</h:column>
<h:column>
<h:outputText value="#{item.quantity}" />
</h:column>
<h:column>
<h:outputText value="#{item.price}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>
</h:column>
<h:column>
<h:outputText value="#{item.price / item.quantity}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>/u
</h:column>
</rich:dataTable>
The problem is that no radio button fire the ajax event, even no javascript code is rendered in the resuling code :
<table id="form:tblQuantities" class="rf-dt quantities">
<colgroup span="4">
</colgroup>
<tbody id="form:tblQuantities:tb" class="rf-dt-b">
<tr id="form:tblQuantities:0" class="rf-dt-r rf-dt-fst-r">
<td id="form:tblQuantities:0:j_idt296" class="rf-dt-c">
<label><input id="form:tblQuantities:0:rbtnQuantity" type="radio" name="form:rbtnQuantity" checked="checked" value="25" /> 25</label>
</td>
<td id="form:tblQuantities:0:j_idt297" class="rf-dt-c">25</td>
<td id="form:tblQuantities:0:j_idt309" class="rf-dt-c">118,75 $</td>
<td id="form:tblQuantities:0:j_idt310" class="rf-dt-c">4,75 $/u</td>
</tr>
[more similar rows...]
I've also included one t:inputText at top, see if it was the t:selectOneRadio usage that was the problem but no.
I'm using Mojarra, RichFaces 4.2.1, Tomahawk 1.1.14.
Since I've not been able to use a4j:ajax or f:ajax with t:selectOneRadio, I've used this workaround :
<a4j:jsFunction name="changeQuantity" oncomplete="renderPrices();">
<a4j:param assignTo="#{orderActions.selectedQuantity}" name="quantity" />
</a4j:jsFunction>
<t:selectOneRadio onclick="quantity = jQuery(this).val();changeQuantity(quantity);" id="rbtnQuantity" value="#{orderActions.selectedQuantity}" layout="spread">
<f:selectItems value="#{orderActions.quantities}" var="item" />
<f:converter converterId="integerConverter" />
</t:selectOneRadio>
It is working properly, but I would prefer to fix the problem if ever someone find the right solution or I.
EDIT :
Here is the final used code :
<a4j:jsFunction name="changeQuantity" oncomplete="renderPrices();">
<a4j:param assignTo="#{orderActions.selectedQuantity}" name="quantity" />
</a4j:jsFunction>
# Each row of the table :
<input type="radio" name="quantity" value="#{item.quantity}" checked="#{orderActions.selectedQuantity eq item.quantity ? 'checked' : ''}" onclick="changeQuantity(#{item.quantity});" />
In my application I have implemented an employee search functionality using the RichFaces 3.3 modal panel on Facelets. I'm trying to make this reusable across my application, so I have added the following code in facelet-taglib_1_0.xml
<tag>
<tag-name>employeeSearch</tag-name>
<source>employee-search.xhtml</source>
</tag>
The xhtml page contains the following components
search input field
search button
result datatable
I have also mapped a backing bean.
My issue is that I'm not able to get the value from the search input field
I wonder whether the approach given above is correct or if there's any better approach for this?
Thanks for your reply Arjan...i tried but result not binding in result datatable list. my code is here.
EmployeeSearchBean is request scope.
Calling reusable tag code :
<foo:employeeSearch orgSearchId="empHistSearch" bean="#{EmployeeSearchBean}" action="findEmployee" renderedVal="#{empHist.editable}" />
Model panel code :
<a4j:jsFunction name="submit" action="#{bean[action]}" />
<rich:modalPanel id="orgUnitSearchPanel_empHistSearch" autosized="true" width="450">
<f:facet name="header">
<h:outputText value="#{messages.mepit_OE_Search}" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/pics/buttons/fenster_schliessen.gif" id="hideOrgUnitSearchPanel_#{orgSearchId}" styleClass="hidelink" />
<rich:componentControl for="orgUnitSearchPanel_#{orgSearchId}" attachTo="hideOrgUnitSearchPanel_#{orgSearchId}" operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<table class="dispinputTable" cellspacing="2" cellpadding="0">
<tr>
<td style="width: 75px;">
<h:outputText value="#{messages.mepit_OE}" />
</td>
<td>
<h:inputText id="empHist_oeExecutingName" value="#{EmployeeSearchBean.empSearchCriteria}" styleClass="text" size="60" />
</td>
<td>
<a4j:commandButton styleClass="mepitButtons" onclick="submit();" value="#{dbMessages.db_search}" title="#{dbMessages.db_search}" reRender="orgUnitDT#{orgSearchId}" />
</td>
</tr>
<tr>
<td colspan="3" >
<rich:extendedDataTable width="425px" height="150px"
id="orgUnitDT#{orgSearchId}" cellspacing="0" cellpadding="0" border="0"
styleClass="inhalt" var="oeLst" value="#{EmployeeSearchBean.employeeList}" rowClasses="row0, row1">
<rich:column width="370px;" align="left">
<f:facet name="header">
<h:outputText value="#{messages.mepit_OE}" />
</f:facet>
<h:outputText id="empHist_OE" value="#{oeLst.name}" />
</rich:column>
<rich:column width="55px;">
<f:facet name="header">
<h:outputText value="#{messages.mepit_select}" />
</f:facet>
<h:commandLink value="" styleClass="edit">
<f:setPropertyActionListener value="#{oeLst}" target="#{SkillPM.executingOrgUnit}" reRender="empHist_orgUnit" />
</h:commandLink>
<h:commandLink styleClass="edit" onclick="#{rich:component(mepit:concat(orgSearchId,'orgUnitSearchPanel'))}.hide(); submit(); return false;" />
</rich:column>
</rich:extendedDataTable >
</td>
</tr>
</table>
</rich:modalPanel>
One thing that's immediately open for improvement is that you should not add your own tags to what looks like the standard facelets taglib file. Leave that file alone and create your own file.
If you pass a value binding to your tag, and bind your search input field to this, then it should work:
<foo:employeeSearch myValue="#{yourBackingBean.someValue}"/>
And then in employee-search.xhtml:
<h:inputText value="#{myValue}" />
Feel free to use some other name instead of myValue. The point is that the attribute name you use on your custom tag should match what the input text component binds to.