Preset checked state of h:selectOneRadio with passthrough elements - jsf

I am trying to implement the solution described in
<h:selectOneRadio> renders table element, how to avoid this?
<div class="form-group">
<h:outputLabel styleClass="control-label"
value="#{msgClient.legalPersonality} " />
Selected value : <h:outputText value="#{msgClient['legalPersonality.' += clientBean.clientDto.legalPersonality.label]}" />
<div>
<f:metadata>
<f:viewParam name="legalPersonality" value="#{clientBean.clientDto.legalPersonality}" />
</f:metadata>
<ui:repeat var="legalPersonality" value="#{clientBean.legalPersonalities}">
<label class="radio-inline">
<input type="radio" jsf:id="legal" pt:name="legalPersonality" value="#{legalPersonality}">
<f:ajax execute="#this" render="#form" />
</input>
<h:outputText value="#{msgClient['legalPersonality.' += legalPersonality.label]}" />
</label>
</ui:repeat>
</div>
</div>
Everything seems to work fine, the selected value is correctly updated with the f:ajax component (setter is called with the correct value) BUT radio buttons are never checked. I mean it is checked when I click on it but it goes unchecked immediatly after. Even at page load, with a default value in clientDto.legalPersonality, everything is unchecked.
How it looks like : http://oi58.tinypic.com/242788g.jpg
Any help will be greatly appreciated. Thank you.

Indeed, the example in the question you found was a bit too oversimplified. It was missing the checked attribute which is necessary in order to preset the current selection on page load and/or after ajax render as in your case. In HTML, the checked state of a radio button is achieved by setting the checked attribute.
You can use <f:passThroughAttribute> to set the checked attribute, whereby you make sure that you set #{null} in unchecked case, so that it wouldn't render the checked attribute at all. It's namely a minimized attribute; even if we used checked="false", HTML would still consider it checked.
<input type="radio" jsf:id="legal" pt:name="legalPersonality" value="#{legalPersonality}">
<f:passThroughAttribute name="checked" value="#{legalPersonality eq clientBean.clientDto.legalPersonality ? 'checked' : null}" />
<f:ajax execute="#this" render="#form" />
</input>
The example in the question you found has in the meanwhile been updated. Thanks!

Related

JSF passthrough radio button selection resets on form validation errors

I have a JSF 2.2 form comprised of an input text field and a pair of radio buttons displayed inline. Given the known limitations on radio button groups in JSF 2.2, I'm using the technique outlined by BalusC in this blog post. We cannot upgrade to JSF 2.3, as this is a Weblogic application and we're currently locked on Weblogic 12.2 (JavaEE 7).
While this technique works fine when a valid form is submitted, the problem is that if an invalid form is submitted, then the user's radio button selection is lost, and it resets to the last valid value (or initial value).
Here's an example of how I'm defining the radio button pair, using a h:inputHidden element and linking its binding attribute with the name attributes of the individual radio buttons (for their group ID).
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<div class="form-group">
<h:outputLabel for="heightInput"
value="Height"
styleClass="col-xs-6" />
<div class="col-xs-6">
<h:inputText id="heightInput"
value="#{modelBean.height}"
required="true" />
</div>
<div class="col-xs-12">
<div class="radio-inline">
<h:outputLabel for="heightCentimeters">
<input type="radio"
jsf:id="heightCentimeters"
pt:name="#{hiddenHeightUnitSelection.clientId}"
value="CENTIMETERS"
pt:checked="#{modelBean.heightUnit eq 'CENTIMETERS' ? 'checked' : null}" />
Centimeters
</h:outputLabel>
</div>
<div class="radio-inline">
<h:outputLabel for="heightInches">
<input type="radio"
jsf:id="heightInches"
pt:name="#{hiddenHeightUnitSelection.clientId}"
value="INCHES"
pt:checked="#{modelBean.heightUnit eq 'INCHES' ? 'checked' : null}" />
Inches
</h:outputLabel>
</div>
<h:inputHidden id="heightUnitSelection"
binding="#{hiddenHeightUnitSelection}"
value="#{modelBean.heightUnit}"
rendered="#{facesContext.currentPhaseId.ordinal ne 6}" />
</div>
</div>
</ui:composition>
How can I preserve the user's radio button selection in the event an invalid form is submitted? The model is never updated with their selection. Other form elements preserve their values across form submissions, even when validation errors exist. How can I have my radio button group behave similarly?
Indeed, the checked attribute is comparing the model value directly.
pt:checked="#{modelBean.heightUnit eq 'CENTIMETERS' ? 'checked' : null}"
The model value is updated during UPDATE_MODEL_VALUES phase, but it won't be executed when there's a validation error encountered during PROCESS_VALIDATIONS phase.
Basically, you want to check the submitted value instead of the model value. This is already covered by the logic behind UIInput#getValue(). In your specific case, you want to compare against the value of the <h:inputHidden> instead.
pt:checked="#{hiddenHeightUnitSelection.value eq 'CENTIMETERS' ? 'checked' : null}"
The blog article linked in your question has in the meanwhile been updated.

<h:commandButton> Create a new CDI #ViewScoped on Click, instead of using existing one

In a JSF 2.2 application, a user visit the link test.xhtml?id=324 , The page must have the paramater id. The page is backed by a CDI #ViewScoped Bean called TestBean.
The fields get initiliazed using a #postconstruct method
#PostConstruct
public void initialize() {…}
and this method that, load data based on id, if id is not present or correct, then direct the user to another page
<f:metadata>
<f:viewAction action="#{testBean.redirectNoParameters}"></f:viewAction>
</f:metadata>
public String redirectNoParameters() {
//method load data based on id, if id is not present or correct, then direct the user to another page
test = testDao.find(id);
In this page there is a comment section
<h:form role="form" prependId="false" >
<h:selectOneMenu value="#{testBean.sortComment}" valueChangeListener="#{testBean.orderComments}">
<f:ajax event="change" execute="#this" render="comment-listing" />
<f:selectItem itemLabel="Recent" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="Oldest" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="Popular" itemValue="3"></f:selectItem>
</h:selectOneMenu>
</h:form>
<div jsf:id="comment-listing">
<div >
<h:form role="form" prependId="false">
<ui:repeat var="comment" value="#{testBean.comments}" >
<div >
<div >
<div>
<h:commandButton value="#{comment.votes.size()}" action="#{testBean.upVote(comment)}" >
<f:ajax execute="#this" render="comment-listing" immediate="true"/>
</h:commandButton>
</div>
</div>
<div >
<h4 >
<h:link outcome="channel">
<f:param name="handle" value="#{comment.commentor.handle}"></f:param>
#{comment.commentor.handle}
</h:link>
on <span class="c-date">#{comment.creationDate}</span>
</h4>
#{comment.comment}
</div>
</div>
</ui:repeat>
</h:form>
</div>
</div>
As You can see for each comment there is a <h:commandButton> for a user to upvote the comment (like in youtube, stackoverflow…) . When the method is clicked it works as inteded. The method testBean.upVote(comment), is called and the ui is updated.
THEN I use the first form above to Re-order comments, say for example the change is from popular -> Recent. Also the method does its job and the ui is updated.
Till now all is working great.
However, When I click the upvote btn/method (of a different comment) AGAIN. The contsructor get called, so is #postconstruct, and the redirectNoParameters().
I have tried removing all ajax tag to see if it is an ajax problem. And The problem still occurs. So it’s not an ajax issue.
I have tried remove the parameter comment from the method "#{testBean.upVote(comment)}" to see if that’s what producing the problem. And The problem still occurs.
I have tried using <c:forEach instead of <ui:repeat . Still no hope.
What’s produce the problem? Why is this happening instead of just calling the method of the command button ?? Thanks.

Unable to ajax update component with p:commandLink click

I have three options for user: two equipment selection and one option to say I don't want equipment. To select two equipment I used p:commandLink. To say I do not want equipment I used h:selectOneRadio.
If user do not want to buy equipment, user can select the option button 'I do not wish to have'. So at anytime, only one button can be selected within the three of them.
If I press h:selectOneRadio button, then other two buttons (p:commandLink) are updating properly to 'select'. But if I select an equipment (p:commandLink), then h:selectOneRadio button is not deselecting even though it's bean value is updated to false.
JSF page
<h:panelGroup id="pwpPanel">
<div class="row">
<ui:repeat value="#{reconBean.EQList}" var="equipment">
<div class="col-md-4">
<div class="btn-fibre-tab text-center">
<ui:fragment rendered="#{reconBean.pwpSelectedEquipmentID != equipment.id }">
<p:commandLink id="selectpwp" process="#form" update=":mainForm:pwpPanel"
styleClass="select_button" action="#{reconBean.updatePWPItem(equipment.id)}"
immediate="true">
Select
<f:ajax render=":mainForm:pwpPanel" />
</p:commandLink>
</ui:fragment>
<ui:fragment rendered="#{reconBean.pwpSelectedEquipmentID eq equipment.id }">
<p:commandLink id="selectedpwp" process="#form" update=":mainForm:pwpPanel"
styleClass="selected_button" action="#{reconBean.updatePWPItem(equipment.id)}"
immediate="true">
Selected
<f:ajax render=":mainForm:pwpPanel" />
</p:commandLink>
</ui:fragment>
</div>
</div>
</ui:repeat>
</div>
<div class="row">
<div class="col-sm-12 ">
<h:selectOneRadio value="#{reconBean.notPurchaseWithPurchase}" id="radioDoNotWant"
name="pwpEquipment">
<f:selectItem itemLabel="I do not wish to have" itemValue="true" />
<f:ajax event="click" execute="#this" listener="#{reconBean.resetPWPSelection}"
render="pwpPanel" />
</h:selectOneRadio>
</div>
</div>
</h:panelGroup>
Bean values
public void updatePWPItem(String itemID) {
pwpSelectedEquipmentID = itemID;
notPurchaseWithPurchase = false;
}
public void resetPWPSelection(AjaxBehaviorEvent event) {
pwpSelectedEquipmentID = null;
}
The problem is the immediate attribute set to true on the CommandLinks. It is essentially to understand the The Lifecycle of a JavaServer Faces Application. The impact of the immediate attribute differs in, on what kind of component it is applied. As stated in a good article:
In the standard JSF lifecycle, the action attribute on an Command component is evaluated in the Invoke Application phase
... if you set immediate="true" on it.
To be honest, i do not exacly know why this prevents your radio option from being unchecked (I am still learning all aspects of the JSF lifecylce), but i think it is because it remains unchanged in the component tree and gets rendered as it was even if the model is updated through your action (if someone may comment on this i will update accordingly).
The solution to your problem is to remove the immediate attribute from your CommandLinks or set it to false.
Some remarks:
PrimeFaces CommandLinks have build in AJAX capabilities which are enabled by default. There is no need to enclose an additional <f:ajax />. Only if you want to disable AJAX you have to set its ajax attribute to false. The render attribute of Ajax conforms to the update attribute of CommandLink.
You are using SelectOneRadio in a context it is not designed for. As stated on JSFToolbox:
This component is designed for situations where you want to display a mutually exclusive list of options to the user as a set of radio buttons.
Consider using another better suited component like CommandLink or CommandButton.

Confusion JSF Updating Value of Input text in Backing bean

Today, i was solving a small problem in JSF. Actually, i have an InputText on my xhtml page with readyOnly attribute set to true.Requirement was on click of a boolean checkbox, i should make the input text editable, means readyOnly false. The code somewhat seemed like this.
<div class="div-form-col" >
<h:outputLabel value="#{msgs.violationAmount} " for="violationAmt" />
<h:inputText value="#{outpassMBean.violationWebDTO.violationAmount}" id="violationAmt" readonly="true"/>
</div>
<div class="div-form-row">
<div class="div-form-col">
<h:outputLabel value="#{msgs.violationExemptionApplicable} " for="violationExempted" />
<h:selectBooleanCheckbox value="#{outpassMBean.violationWebDTO.violationExemptionApplicable}" id="violationExempted" onchange="makeViolationAmountEditable(this);">
</h:selectBooleanCheckbox>
</div>
</div>
The script of that method was given as below :-
function makeViolationAmountEditable(id){
alert("Ben");
document.getElementById('violationAmt' ).readOnly=false;
alert("Done");
}
Now my first problem was, if i am editing the value in the text field, how i can update the value of violationAmt in backing bean. What can be the best possible way? As i am using PrimeFaces, i came across concept remoteCommand. So here is what i added.
<p:remoteCommand name="makeViolationAmountEditableOnServer" action="#{outpassMBean.makeViolationAmountEditable}" update="amountPanelApplicant"/>
The method at the backing bean level was something like this
public void makeViolationAmountEditable(){
//Set updated value
setUpdatedViolationAmount(violationWebDTO.getViolationAmount());
//Some other code.
}
Problem was that, whenever this code was running, the violation amount in violationWebDTO was the old one, not the one which i was entering after making the input field editable. Though i saw in firebug the updated value was part of request but in the backing bean, however still old value was getting referred. I don't understand why?
My senior told me, you are updating value of readOnly on client side not server side, and updated my code something like this.
<p:outputPanel id="amountPanelApplicant">
<p:outputPanel rendered="#{outpassMBean.violationWebDTO.violationForCmb eq 2 and outpassMBean.violationWebDTO.isViolationExists}">
<p:outputPanel styleClass="div-form twoCol">
<div class="div-form-row">
<div class="div-form-col" >
<h:outputLabel value="#{msgs.violationAmount} " for="violationAmt" />
<h:inputText value="#{outpassMBean.violationWebDTO.violationAmount}" id="violationAmt" readonly="#{outpassMBean.violationAmtEditable}">
</h:inputText>
</div>
<div class="div-form-col">
<h:outputLabel value="#{msgs.outPayTot} " for="totalViolationAmount" />
<h:outputLabel styleClass="readOnly" value="#{outpassMBean.violationWebDTO.totalViolationAmount}" id="totalViolationAmount" />
</div>
</div>
</p:outputPanel>
<p:outputPanel styleClass="div-form twoCol" rendered="#{outpassMBean.outpassApplication.applicationSubType.id eq 2 }" >
<div class="div-form-row">
<div class="div-form-col">
<h:outputLabel value="#{msgs.violationExemptionApplicable} " for="violationExempted" />
<h:selectBooleanCheckbox value="#{outpassMBean.violationWebDTO.violationExemptionApplicable}" id="violationExempted" onchange="makeViolationAmountEditableOnServer();">
</h:selectBooleanCheckbox>
<p:remoteCommand name="makeViolationAmountEditableOnServer" action="#{outpassMBean.makeViolationAmountEditable}" update="amountPanelApplicant"/>
</div>
</div>
</p:outputPanel>
</p:outputPanel>
public void makeViolationAmountEditable(){
if(logger.isDebugEnabled()){
logger.debug("Inside makeViolationAmountEditable...");
}
//setting violation amount editable flag
setViolationAmtEditable(false);
//Preserving original and total amount.
setOriginalViolationAmt(violationWebDTO.getViolationAmount());
setOriginalTotalViolationAmount(violationWebDTO.getTotalViolationAmount());
}
In the above updated code, no javascript called. The readyOnly value is set to true and false from the backing bean itself. After this update, basically the new edited value was updated in the violationWebDTO.
Can someone explain? Why not in the first snapshot? It's not a complete code but i tried to explain the confusion. Any pointers would be helpful.
This is JSF's safeguard against tampered/hacked requests wherein the enduser uses client side languages/tools like HTML or JS to manipulate the HTML DOM tree and/or HTTP request parameters in such way that the outcome of JSF's disabled, readonly or even rendered attribute is altered.
Imagine what would happen if the JSF developer checked an user's role in such a boolean attribute against the admin role like so disabled="#{not user.hasRole('ADMIN')}" and a hacker manipulated it in such way that it isn't disabled anymore for non-admin users. That's exactly why you can only change the mentioned attributes (and the required attribute and all converters, validators, event listeners, etc) on the server side.
This can however be solved in a simpler manner without the need for an additional property, without the <p:remoteCommand> and the additional bean method.
<h:inputText id="violationAmount" ... readonly="#{makeViolationAmountEditable.value}" />
...
<h:selectBooleanCheckbox binding="#{makeViolationAmountEditable}">
<f:ajax render="violationAmount" />
</h:selectBooleanCheckbox>
See also:
Why JSF saves the state of UI components on server?
How does the 'binding' attribute work in JSF? When and how should it be used?.

How to access html components in JSF EL?

I want some code in facelet (jsf 2.0) to work:
<h:inputText id="q" />
<h:button outcome="/search.xhtml?q=#{q.value}" />
but when I press the button, search page opens without any parameters.
I think, my EL expression is wrong. Is it possible to access inputText value from EL expression? If not, how can I achieve the same functionality?
I've finished with using plain html form:
<form action="faces/search.xhtml" method="get">
<input type="text" name="query" />
<input type="submit" value="Find" />
</form>
In search.xhtml I have view param to get a value of query string:
<f:metadata>
<f:viewParam name="query" />
</f:metadata>
This solution has the problem - "faces/search.xhtml" is hardcoded. Also, when I place this form in search.xhtml and perform several searches I have something like this in browser url:
"http://localhost:8080/Application/faces/faces/faces/search.xhtml"
I think this problem can be solved with PrettyFaces (TODO :)
this is a late answer but I guess many people finding this post will have the same doubt whether EL can access html component and how it can:
Yes, EL can access JSF component which are implicit JSF object.
However, up to now I have only seen and used the example of component.valid:
<h:inputText id="streetNumber" value="#{property.streetNumber}" title="streetNumber" required="true" requiredMessage="Please enter the street number!" validatorMessage="Please enter a street number between 1 and 1000" converterMessage="Please enter a number" pt:placeholder="900">
<f:convertNumber integerOnly="true"/>
<f:validateLongRange minimum="1" maximum="1000" />
</h:inputText>
<h:message for="streetNumber" class="#{!streetNumber.valid ? 'label label-warning' : 'none'}" />
So, I suggest you(Dmitry) change the code to
<h:button outcome="#{"/search.xhtml?q=" + q.value}" />
Please let me know whether it works because I am also curious and anyone who faces the similar problem can follow my example and please let me know the result.

Resources