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.
Related
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.
In JSF using primeface
<p:autoComplete minQueryLength="5" value="#{itemManagementMB.itemManagementLazy.code}" forceSelection="true" autocomplete="false"
completeMethod="#{itemManagementMB.autoCompleteUsindCode}" dropdown="true">
<p:ajax event="itemSelect" listener="#{itemManagementMB.handleSelect}" />
</p:autoComplete>
When I enter 5 keywords that working fine. but I want implement in that way , if user enter 4 words and press dropdown it populate autocomplete based on 4 keywords.
One thing is blocking me that when I click on dropdown, autoCompleteUsindCode(String query) method take empty string and itemManagementMB.itemManagementLazy.code also empty.
any update ? / solution?
As per Primefaces 5.1 User Guide page 29, I quote:
Dropdown Mode
When dropdown mode is enabled, a dropdown button is displayed next to
the input field, clicking this button will do a search with an empty
query, a regular completeMethod implementation should load all
available items as a response.
After thinking a lot, I solved in that way
Solution:
<p:autoComplete id="anum" minQueryLength="5" value="#{transferInMB.itemManagementLazy.code}" forceSelection="true"
completeMethod="#{transferInMB.autoCompleteUsingCode}" dropdown="true">
<p:ajax event="itemSelect" listener="#{transferInMB.handleSelect}" />
<p:ajax event="keyup" />
</p:autoComplete>
I just add the following
<p:ajax event="keyup" />
Anyone can please help me I am getting a weird issue I have list of records in datatable now i selected a record and click on Edit button now this selected record will be shown to popup window.
Now issue is that if i will edit selected value populated by previous window and press submit button page refreshing but action not invoked,but if i will change those value which not coming from parent Window or empty field in Popup Window then commandButton action Invoked.
Any one please tell me what the issue. What i am missing?
Parent Window is Session Scoped
Pop Window is View Scoped
JSF Version 2.1.13
Richfaces Version 4.3.5.Final
Javax.el 3.0.0
Servlet 2.4
el-api 2.2
el-impl 2.2
Jboss 7.1.0.Final
EDIT:-
PopUpWindow CommandButton Code
<a4j:commandButton
action="#{addFeaturePopUpBean.addFeature(parentBean)}"
value="#{bsmPortalLabel['button.common.submit']}"
image="/resources/images/submit-arrow.png"
render="cfsCreate,createRfs,createReso,notification,search-filter" >
<rich:tooltip id="toolemsSubmit" layout="block" >
<span style="white-space: nowrap">
#{bsmPortalLabel['tooltip.common.submit']}</span>
</rich:tooltip>
</a4j:commandButton>
EDIT1 :-
Exact Cause of the problem if i am using component link this
<h:inputText style="width:142px" id="featureName"
value="#{addFeaturePopUpBean.featuesObj.name}"
immediate="true"
validatorMessage="#{bsmPortalMessage['message.catalog.validation.compositeChar.name']}">
<f:validateRequired />
<f:validateRegex pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]*$"></f:validateRegex>
<f:ajax event="blur" execute="featureName" render="msg1" />
</h:inputText>
<h:message id="msg1" for="featureName" style="color:red" />
Then commandButton invoked but if i will remove <f:ajax event="blur" execute="featureName" render="msg1" /> from the textBox now command not invoked .
But right now i am not able to figure out why this is happening?
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 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" />