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}"
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 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"
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 have designed a jsf page and my scenario is to render output panel based on changing the dopdown in selectonemenu. My problem here is required=true in inputtext box. It dosnt allow other components to render and when i give value in textbox , then it allows the selectonemenu to render . What is the mistake i have done.Please can someone solve my problem
Code
<a4j:outputPanel id="thapalSection" >
<ui:fragment>
<fieldset style="table-layout: fixed;">
<legend>#{msg.lbl_post_offSect}</legend>
<table border="0" cellpadding="1" cellspacing="15" width="100%"
style="border-width: 1px;border-spacing: 1px;border-style: solid;border-color:#c2c2c2">
<tr>
<td align="left" width="20%">#{msg.lbl_SenDTo}<span>
<font color="red"><b>*</b></font></span>
</td>
<td align="left" colspan="3" width="30%">
<a4j:outputPanel id="tapalSectionSendToPanel">
<h:inputText id="sendToId" value="#{DataBean.kabalSectionBean.sendTo}" class="createresizedTextbox"
readonly="true" required="true" requiredMessage="#{msg.labl_required}" />
<h:message for="sendToId" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<tr>
<td align="left" width="20%" >#{msg.lbl_lettRef}</td>
<td align="left" width="34%" >
<a4j:outputPanel id="letterReferenceIDPAnel">
<h:inputText id="lettRefId" value="#{DataBean.kabalSectionBean.letterFileRefNo}"
class="createresizedTextbox" required="true" requiredMessage="#{msg.labl_required}" immediate="true"/>
<h:message for="lettRefId" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<tr>
<td>#{msg.lbl_Sender_type}</td>
<td>
<a4j:outputPanel id="senderTypePanel" >
<h:selectOneMenu value="#{DataBean.kabalSectionBean.senderType}" class="createresizedTextbox" id="senderTypeID">
<a4j:ajax event="change" render="thapalSection internalPanel" listener="#{FileTrackAction.selectSenderType}" />
<f:selectItem itemValue="--select--" itemLabel="--Select--" />
<f:selectItem itemValue="internal" itemLabel="Internal" />
<f:selectItem itemValue="external" itemLabel="External" />
<f:validator validatorId="org.gov.tnwrd.bean.validation.DropdownValidation" />
</h:selectOneMenu>
<h:message for="senderTypeID" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<a4j:outputPanel id="internalPanel" >
<ui:fragment rendered="#{DataBean.kabalSectionBean.sendTypeIntEnabled==true}" >
<tr>
<td align="left" width="20%" >#{msg.lbl_office_name}</td>
<td align="left" width="34%">
<h:inputText id="internalType" value="#{DataBean.kabalSectionBean.officeName}" class="createresizedTextbox" readonly="true" />
</td>
<td align="left" width="17%" >#{msg.lbl_type_letter}</td>
<td align="left">
<h:selectOneMenu class="createresizedTextbox" value="#{DataBean.kabalSectionBean.typeOfletter}">
<f:selectItem itemValue="--" itemLabel="--Select--" />
<f:selectItem itemValue="ordinaryLetter" itemLabel="Ordinary Letter" />
<f:selectItem itemValue="doLetter" itemLabel="D.O Letter" />
<f:selectItem itemValue="confidentialLetter" itemLabel="Confidential Letter" />
<f:selectItem itemValue="OtherLetter" itemLabel="Other Letter" />
</h:selectOneMenu>
</td>
</tr>
</ui:fragment>
</a4j:outputPanel>
</table>
</fieldset>
</ui:fragment>
</a4j:outputPanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="1" cellpadding="15" width="100%" border="0">
<tr>
<td></td>
<td colspan="6" align="right">
<div class="buttons">
<a4j:commandButton id="addThapal" value="#{msg.btn_send}" type="button" render="thapalPanel savePopUp" action="#{FileTrackAction.saveThapalDetails}" oncomplete="if(#{DataBean.kabalSectionBean.statusCode eq 'Success'}) #{rich:component('savePopUp')}.show();"/>
<a4j:commandButton id="clearId" value="#{msg.btn_clear}" render="thapalPanel" action="#{FileTrackAction.clearTapalSection}" type="button" />
</div>
</td>
</tr>
</table>
</a4j:outputPanel>
The problem is, that the validation fails. This causes JSF to interrupt its lifecycle and jump from validation directly to rendering without changing anything in between.
I don't know exactly when you set DataBean.kabalSectionBean.sendTypeIntEnabled but you can check that this value will not be set to true and thus your panel will not be changed.
You have different options here. Either you can use the immediate="true" attribute to skip validation, or you can use execute="list of components you want to execute". Execute means, that the data will be sent to the backing bean, will be validated and the setXXX(...) methods will be called for this input. Here you would NOT list the required field and thus its validation won't be a problem.
If you use execute="#none" it has the same effect like immediate="true".
I need a way to create editable table like this. I interested is it possible to use h:panelGrid to display and edit the data. From my previews post I saw that it's possible to simple JSF table, but is this possible with h:panelGrid?
<table>
<ui:repeat var="elem" value="#{yourMB.yourDataList}">
<tr>
<td>#{elem.userid}</td>
<td>
<h:outputText value="#{elem.name}"
rendered="#{not elem.editable}" />
<h:inputText value="#{elem.name}" rendered="#{elem.editable}" />
</td>
<td>
<h:outputText value="#{elem.telephone}"
rendered="#{not elem.editable}" />
<h:inputText value="#{elem.telephone}"
rendered="#{elem.editable}" />
</td>
<td>
<h:commandLink value="Edit" rendered="#{not elem.editable}"
action="#{yourMB.editAction(elem)}" />
</td>
</tr>
</ui:repeat>
</table>
<h:commandButton value="Save Changes" action="#{yourMB.saveAction}" />
The answer is "NO". Try to use h:dataTable instead of h:panelGrid.