Rendering doesnt work for a4j:outputPanel - jsf

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

Related

JSF Links not working

I have a form with an attachment.When I tried to view my document,It is doing form validation and is asking to fill the respective fields,But i don't want to validate the form to view my file.I have changed the link from hcommand link to acommand link and tried a few more.But it's not working.Can someone help me out.
My code is
<h:form id="mailForm">
<span class = "clasMpnlErr" style="color:Blue"><h:messages id="mailFormErrorMessages" for="mailForm"/></span>
<table width="100%">
<tr>
<td style="width: 60px;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.to']}"/>:
</td>
<td>
<h:inputText id="to" value="#{action.currentEditingEmail.toAddressList}" style="width: 685px;margin-left: 10px;" required="true" maxlength="255">
<f:validateLength maximum="255"/>
</h:inputText>
<span class="clasFormElemErr"><h:message for="to"/></span>
</td>
</tr>
<tr>
<td style="width: 60px;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.cc']}"/>:
</td>
<td>
<h:inputText id="cc" value="#{action.currentEditingEmail.ccAddressList}" style="width: 685px;margin-left: 10px;" maxlength="255">
<f:validateLength maximum="255"/>
</h:inputText>
<span class="clasFormElemErr"><h:message for="cc"/></span>
</td>
</tr>
<tr>
<td style="width: 60px;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.bcc']}"/>:
</td>
<td>
<h:inputText id="bcc" value="#{action.currentEditingEmail.bccAddressList}" style="width: 685px;margin-left: 10px;" maxlength="255">
<f:validateLength maximum="255"/>
</h:inputText>
<span class="clasFormElemErr"><h:message for="bcc"/></span>
</td>
</tr>
<tr>
<td style="width: 60px;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.subject']}"/>:
</td>
<td>
<h:inputText id="subject" value="#{action.currentEditingEmail.subject}" style="width: 685px;margin-left: 10px;" maxlength="100">
<f:validateLength maximum="100"/>
</h:inputText>
<span class="clasFormElemErr"><h:message for="subject"/></span>
</td>
</tr>
<tr>
<td> </td>
<td>
<h:inputTextarea readonly="true" value="#{action.currentEditingEmail.contentNoComments}" rows="10" style="width: 685px;background: white;border: 0;margin-left: 10px;" />
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.comments']}"/>:
</td>
<td>
<h:inputTextarea id="comments" value="#{action.currentEditingEmail.comments}" rows="5" style="width: 685px;margin-left: 10px;" />
<span class="clasFormElemErr"><h:message for="comments"/></span>
</td>
</tr>
<tr>
<td align="right" valign="bottom">
<int:status id="editingEmailStatus" />
</td>
</tr>
</table>
<h:commandButton id="previousEmailLink" action="#{action.previousEmail}" style="visibility:hidden;display: none;">
<a:support event="onclick" disableDefault="true" action="#{action.previousEmail}" rendered="#{useAjax}" reRender="editingEmailOuter" onsubmit="ScnUtil.Status.start('editingEmailStatus');" oncomplete="ScnUtil.Status.end('editingEmailStatus');" />
</h:commandButton>
<h:commandButton id="nextEmailLink" action="#{action.nextEmail}" style="visibility:hidden;display: none;">
<a:support event="onclick" disableDefault="true" action="#{action.nextEmail}" rendered="#{useAjax}" reRender="editingEmailOuter" onsubmit="ScnUtil.Status.start('editingEmailStatus');" oncomplete="ScnUtil.Status.end('editingEmailStatus');" />
</h:commandButton>
<s:div id="viewAttachDocument" style="clear: both;width: 780px;">
<s:div style="clear: both;font: normal 12px Verdana">
<h:outputText value="#{labels['view.transport.label.attachments']}" rendered = "#{action.showPopUpDialog == true}"/>
</s:div>
<table style=" margin-left: 135px; width: 510px;background-color: white;">
<thead>
<tr>
<th style="color: lightslategrey;text-align: left;">
<h:outputText value="#{labels['view.tender.confirmation.include.documents']} " rendered = "#{action.showPopUpDialog == true}"/>
</th>
<th style="color: lightslategrey;text-align: left;">
<h:outputText value="#{labels['view.tender.confirmation.documentId']}" rendered = "#{action.showPopUpDialog == true}"/>
</th>
<th style="color: lightslategrey;text-align: left;">
<h:outputText value="#{labels['view.tender.confirmation.view']}" rendered = "#{action.showPopUpDialog == true}"/>
</th>
</tr>
</thead>
<tbody>
<a:repeat var="document" value="#{action.documentDetailsList}" varStatus="status">
<h:panelGroup>
<tr>
<td>
<h:selectBooleanCheckbox styleClass="checkbox" id="check_doc" value="#{document.selectChkBox}">
<a:support event="onclick"
ajaxSingle="true"
action="#{action.getSelectedIds(document.fileNetId,document.fileName)}"/>
</h:selectBooleanCheckbox>
</td>
<td>
<h:outputText value="#{document.fileName}"/>
</td>
<td>
<a:commandLink value="#{labels['view.base.button.value.view']}"
action="#{action.viewDocumentContent(document.fileNetId,document.fileName)}" />
</td>
</tr>
</h:panelGroup>
</a:repeat>
</tbody>
</table>
</s:div>
You can skip the validation by attribute "immediate" set to true.
e.g.
<h:commandLink immediate="true" value="" action="" />
Details how immediate attribute works:
https://cwiki.apache.org/confluence/display/MYFACES/How+the+immediate+attribute+works

Bean values not updating in validation in jsf

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?

Primefaces custom selectOneRadio, doesn't propagate to backing bean

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

How to change font size in JSF page

I have this simple JSF table which is use to display data from Database and also to edit data.
<table>
<ui:repeat var="ud" value="#{DCProfileTabGeneralController.dcData}">
<tr>
<td>Datacenter Type</td>
<td>
<h:outputText value="#{ud.type}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.type}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Added</td>
<td>
<h:outputText value="#{ud.dateAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Added</td>
<td>
<h:outputText value="#{ud.hourAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Deployed</td>
<td>
<h:outputText value="#{ud.dateDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Deployed</td>
<td>
<h:outputText value="#{ud.hourDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
</ui:repeat>
</table>
Now I want to extend the table in this way. When the Boolean flag is true I want to display the text in 12px. When the Boolean flag is false I want to display the text in 20 px. Is this possible in JSF?
You can simply use an EL expression to set the appropriate CSS style:
<table id="idTable"
style="font-size: #{DCProfileTabGeneralController.editable ? '12px' : '20px' }">

Update JSF datatable without refreshing the page

I have input fields and datatable in the same page, in such a way that when user adds a new data, data should be added to the datatable without refreshing the page.
To achieve this I tried the following code
xhtml part
<table border="0">
<tr>
<td width="700" height="100px">Customer Name: <h:inputText
immediate="true" id="customername" autocomplete="false" value="#{salesBean.customerName}">
</h:inputText>
</td>
</tr>
<tr>
<td width="900" height="160px">
<table border="1">
<tr>
<td align="left">Product Name</td>
<td align="left">Rate</td>
<td align="left">Quantity</td>
<td align="left">Total Price</td>
<td align="left">Paid</td>
<td align="left">Date of Sales</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><h:inputText immediate="true"
id="productname" autocomplete="false" value="#{salesBean.productName}">
</h:inputText></td>
<td align="left"><h:outputText id="rate"
binding="#{salesBean.productRate}" /></td>
<td align="left"><h:inputText size="2"
onkeyup="return calculateTotalRate(event);" id="quantity" value="#{salesBean.quantity}"/></td>
<td align="left"><h:outputText id="totalprice" /></td>
<td align="left"><h:selectOneRadio id="sor"
title="Select any one of the choice" value="#{salesBean.paidFlag}">
<f:selectItem id="si1" itemLabel="Yes" itemValue="yes" />
<f:selectItem id="si2" itemLabel="No" itemValue="no" />
</h:selectOneRadio></td>
<td align="left"><rich:calendar id="salesDate" value="#{salesBean.salesDate}"></rich:calendar></td>
<td align="center">
<h:commandButton value="Submit">
<a4j:support action="#{salesBean.submit}" reRender="table"></a4j:support>
</h:commandButton>
<h:commandButton value="Cancel" /></td>
</tr>
</table>`
</td>
</tr>
<tr>
<td>
<h:outputText id="errormessage" style="display:inline-block;color:Red;width:300px;"/>
</td>
</tr>
<tr>
<td>
<h:panelGroup id="panel">
<rich:dataTable var="data" id="table" binding="#{salesBean.table}" rendered="#{salesBean.salesHistoryRendered}">
<h:column>
<f:facet name="header">
<h:outputText value="Product Name"/>
</f:facet>
<h:outputText value="#{data.productName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Date of Sale"/>
</f:facet>
<h:outputText value="#{data.dateOfSales}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Is Paid?"/>
</f:facet>
<h:outputText value="#{data.paidCheck}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Quantity?"/>
</f:facet>
<h:outputText value="#{data.quantity}"/>
</h:column>
</rich:dataTable>
<h:outputText id="text" binding="#{salesBean.checkValueChangeListener}"/>
</h:panelGroup>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Please help me to solve this. Please update me if my question is not clear.
I am using JSF 1.2 and Richfaces 3.3.2
Thanks in advance
You have missed event attribute in a4j:support. Should be like this (disableDefault="true" is to prevent h:commandButton standard behavior):
<h:commandButton value="Submit">
<a4j:support event="onclick" disableDefault="true" action="#{salesBean.submit}" reRender="table"/>
</h:commandButton>
Or even better like this (will do the same as the lines above, but in more a4j-style):
<a4j:commandButton value="Submit" action="#{salesBean.submit}" reRender="table"/>
"Without refreshing the page" means AJAX.
RichFaces 3.3 has AJAX support, and their documentation explains how to use it in chapters 5.1 through 5.7.

Resources