EDIT: I adjusted the code, but the problem remains. See below
I have this p:selectOneRadio:
<p:selectOneRadio
value="#{bean.val}"
id="val"
layout="custom"
>
<f:selectItem itemLabel="" itemValue="A" />
<f:selectItem itemLabel="" itemValue="B" />
<p:ajax update="wrapper AData" />
</p:selectOneRadio>
and this p:radioButton:
<h:panelGroup id="wrapper">
<p:radioButton for="val" itemIndex="0" rendered="#{bean.val != 'A'}"/>
</h:panelGroup>
and AData contains other inputs. They are displayed only if the first radio is selected. But this is not important.
When I get a fresh page, both the radios are displayed. When I select one of them, the first one disappear.
The expected behavior by me is that the first radio disappear when selected, and re-appear when the other one is selected.
EDIT2: I tried to remove the rendered. It continued to not work! After I removed the update, it remains visible. But render does not work, so the radio never disappear.
What I'm wronging?
I found the solution. The problem was I have to update an ancestor in common with both the p:selectOneRadio and the p:radioButton
Related
Here is the xhtml code for my autocomplete :
<p:column styleClass="col-quarter">
<p:autoComplete dropdown="false"
id="field"
value="#{managedbean.valueToAssign}"
completeMethod="#{managedbean.completeValue}"
maxResults="7">
<f:ajax event="blur" render="Next_field" />
<f:ajax event="itemSelect" render="Next_field" />
</p:autoComplete>
</p:column>
Here's what I don't get :
When I hover over that zone at the right of the field, the button is active. even if it's invisible. I want the field to be the same width than the next one, but the presence of the button prevents it.
I also tried without the dropdown="false" attribute but I still get the same result
EDIT : I managed to get the same width for both input, but the button is still active even if invisible.
I have a focus problem with the elem <p :selectOneMenu>.
I use <p:focus> to focus on the failed validation fields.
This is a part of my xhtml code:
<h:form>
<p:focus/>
[Some other panel and inputText]
<p:selectOneMenu id="workCategory"
value="#{personDto.category}"
filter="true" filterMatchMode="contains"
required="true" style="min-width: 0px !important;">
<f:selectItem itemValue="#{null}"
itemLabel="please select something"
noSelectionOption="true" itemDisabled="true"/>
<f:selectItems value="#{clientController.categoryList}"
var="category" itemValue="#{category}"
itemLabel="#{category.label}}"/>
<p:ajax event="change"
listener="#{clientController.doSomeJob(personDto.category)}"
partialSubmit="true" process="#this, #(.csrf)"
/>
</p:selectOneMenu>
<p:message for="workCategory" display="text"/>
</h:form>
When the validation fails, the focus will be on the first element whose validation failed, which means that the page scrolls until this element. This works fine for the other elements of my page, such as inputText, switchButton … However it doesn’t seem to work for <p:selectOneMenu> because when it is the first element that failed validation, the page does not scroll until its position.
I checked that the <p:selectOneMenu> receives the class “ui-state-focus” when the focus event is triggered on it. Despite having “ui-state-focus” when the validation failed, it does not scroll as expected.
I tried to replace <p:selectOneMenu> with <h:selectOneMenu>. It works fine for <h:selectOneMenu> but doesn’t for <p:selectOneMenu>.
Why is it happening and how can I solve this issue? I need because I cannot change so lightly to <h:selectOneMenu> since the whole application could be affected.
First of all I am new to AJAX and JSF so excuse my ignorance.
I am troubleshooting an issue on one of our existing applications.
Basically we want to rerender certain input fields if another has a value in it.
The code looks as follows
<rich:column valign="top" align="center">
<f:facet name="header">QTY Locos <br/>Staged</f:facet>
<h:inputText id="qtyLocos" value="#{dataItem.qtyLocosStaged}" width="80px" disabled="#{dataItem.rejected or !stagingDetailBean.editable}" styleClass="inputValidNumber">
<rich:jQuery selector="#qtyLocos" timing="onload" query="numeric" />
<a4j:support event="onchange" limitToList="true" reRender="facesMessagePanel, locoType, teleRequired, crewQualification" />
</h:inputText>
</rich:column>
<rich:column valign="top" styleClass="inputValid" id="locoType" align="center">
<f:facet name="header">Loco Type</f:facet>
<h:selectOneMenu value="#{dataItem.locoType}" disabled="#{dataItem.qtyLocosStaged eq 0 or dataItem.rejected or !stagingDetailBean.editable}">
<f:selectItem itemValue="" itemLabel="" />
<f:selectItem itemValue="6E" itemLabel="6E" />
<f:selectItem itemValue="6E1" itemLabel="6E1" />
<f:selectItem itemValue="7E" itemLabel="7E" />
</h:selectOneMenu>
</rich:column>
<rich:column valign="top" styleClass="center" id="teleRequired">
<f:facet name="header">Telemeter<br/>Required</f:facet>
<h:selectBooleanCheckbox value="#{dataItem.telemeterRequired}" disabled="#{dataItem.qtyLocosStaged eq 0 or dataItem.rejected or !stagingDetailBean.editable}"/>
</rich:column>
On certain browsers when you enter a value in the input field id=qtyLocos the drop down list and tick box becomes active as the criteria for disabled is now false.
But it happens in certain browsers that when you enter a value and the onchange event kicks in it physically removes the HTML tags for the drop down and the tick box. So my page renders completely incorrect.
Is anyone aware of issues with certain versions of chrome and ajax that could explain this behavior?
Some more info regarding this issue. The column headers dont disappear they are still visable. Just the inputs are missing, shifting all the fields after these fields to the left (and then not aligning with its column name anymore)
Ok this problem is getting weirder by the moment. This ONLY happens on machines that are on the company domain. Any machine that doesnt log onto the domain this does not happen. Can company policies influence how these things gets rendered?
Please can anyone explain what the layout property represents in this tag?
<h:selectOneRadio value="" layout="pageDirection" border="1">
<f:selectItem itemLabel="red" itemValue="1" />
<f:selectItem itemLabel="white" itemValue="2" />
</h:selectOneRadio>
Thank you.
See this question: layout with h:selectoneradio.
Basically, JSF can lay out the radio buttons horizontally by layout="lineDirection" or vertically by layout="pageDirection".
Here's the <h:selectOneRadio> reference for you.
Checkboxes and buttons can be set up to either go next to each other on the current line (layout="lineDirection") or stacked vertically, with line breaks after each one (layout="pageDirection").
Since the component is writing a bunch of HTML on your behalf, this just affects how it does it.
I'm trying to display validation messages everytime the user clicks on a radio button.
This only works when I click on the submit button, but not when I click on the radio button:
<h:form id="form">
<p:panel id="panel">
<ui:repeat value="#{questionsBean}" var="question">
<h:panelGrid columns="3" style="margin-bottom:10px" cellpadding="5">
<h:outputText value="#{question.questionText}" />
<p:selectOneRadio id="question" value="#{question.response}"
validator="#{question.validate}" required="true">
<f:selectItem itemLabel="Yes" itemValue="Yes" />
<f:selectItem itemLabel="No" itemValue="No" />
<p:ajax update="msgQuestion" event="change"/>
</p:selectOneRadio>
<p:message for="question" id="msgQuestion" />
</h:panelGrid>
</ui:repeat>
<p:commandButton id="btn" value="Save" update="panel" partialSubmit="true"/>
</p:panel>
</h:form>
The HTML DOM change event is the wrong event when you want to listen on whether the radio button (or checkbox) is clicked. You should be using the click event for this.
The value of the radio button (and checkbox) basically never changes. It has always the same value. The question is more whether that value will be sent to the server side or not. This is determined by the "checked" state which is usually triggered by the DOM click event.
The actual behaviour of the change event on radiobuttons/checkboxes is dependent on the webbrowser used. The behaviour is particulary inconsistent in the IE browser. It not only depends on the version used, but also in the rendering mode used (quirks mode vs standards mode). Perhaps you were actually using IE while testing.
The default event type of the PrimeFaces <p:ajax> (and the standard JSF <f:ajax>), which is valueChange already automatically covers this:
<p:ajax update="msgQuestion" event="valueChange" />
This will autogenerate the right change event handler in text inputs and dropdowns and the click event handler in radiobuttons and checkboxes.
But as said, it's the default event type already. Just omit it altogether.
<p:ajax update="msgQuestion" />