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.
Related
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
I have a view which contain the following fields:
<p:selectOneMenu style="width:40px" value="#{capacityFamilyBean.capacityFamily.bottleneck}">
<f:selectItems value="#{capacityFamilyBean.availableCapFamilyBottlenecks()}"/>
</p:selectOneMenu>
<p:inputText id="capacityFamilyName" binding="#{capacityFamilyName}" style="margin-left:20px" value="#{capacityFamilyBean.capacityFamily.name}">
<p:ajax event="change" update="newBundleButton"/>
</p:inputText>
<p:commandButton id="newBundleButton" icon="ui-icon-plus" disabled="#{empty capacityFamilyName.value}" value="${msgs.New}" oncomplete="PF('capacityFamilyDialog').show();"/>
you can see the value properties are {capacityFamilyBean.capacityFamily.prprty}
capacityFamilyDialog uses the same properties, but they are not pre-filled
<p:selectOneMenu value="#{capacityFamilyBean.capacityFamily.bottleneck}">
<f:selectItems value="#{capacityFamilyBean.availableCapFamilyBottlenecks()}" />
</p:selectOneMenu>
<p:inputText id="capacityFamilyName" style="margin-left:20px" value="#{capacityFamilyBean.capacityFamily.name}"/>
I'm assuming they refer to different capacityFamily object, but how can I counter that?
The dialog is delivered with the page. So it's completely empty.
oncomplete="PF('capacityFamilyDialog').show();"
is pure javascript and only shows this empty popup. If you like to have a dialog with actual values, you have to update it in an ajax-call like your commandButton.
<p:commandButton value="${msgs.New}" update="capacityFamilyDialog_ID" oncomplete="PF('capacityFamilyDialog').show();"/>
The dialogue is functional when you click the button. I think you should update the id for dialogue box.
JSF Code
<p:commandButton id="impBtb"
process="#this" icon="ui-icon-plus" disabled="#{empty capacityFamilyName.value}"
value="${msgs.New}" oncomplete="PF('capacityFamilyDialog').show();" update="#form:capacityFamilyDialog">
</p:commandButton>
So, you may have to perform a ajax-call from your commandbutton to update the dialog box.
Hope it helps!!
I need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.
I'm using Primefaces p:watermark on a p:inputText. Its working fine.
When ever I update the component its loosing watermark,even when there is no content inside the p:inputText
<h:form id="reg_frm">
<p:inputText id="name" value="#{user.name}"/>
<p:watermark value="your name" for="name" id="name_watermark" />
<p:selectOneMenu value="#{user.drpvalue}">
<f:selectItem itemLabel="One" itemValue="1"/>
<f:selectItem itemLabel="two" itemValue="2"/>
<f:selectItem itemLabel="three" itemValue="3"/>
<f:selectItem itemLabel="four" itemValue="4"/>
<p:ajax event="change" update="name name_watermark"/>
</p:selectOneMenu>
</h:form>
How do I retain the Watermark when there is no content in the
p:inputText after update?
Note: Primefaces version - 3.5
According to the PrimeFaces showcase for watermarks: "Watermark displays a hint about input fields by using native placeholder in supported browsers and a javascript solution in others browser compatibility."
PrimeFaces probably adds some hidden javascript stuff to the element which is a parent of both components (input and watermark). In your case that's the form which you would need to update. If you don't want that, put a new panelgroup around both elements and update that, which will have the same effect.
Try this attribute:
oncomplete="PrimeFaces.showWatermarks()"
It was given in Primefaces User's Guide.
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" />