I need to disable Primefaces calendars date picker when i.e. tabbed in to. In otherwords when the calendar element is accesed via keyboard, the date picker cannot be shown for accessibility. How to implement this?
My primefaces calendar element:
<div class="calendarDatepicker">
<p:outputLabel for="cdp" value="Date"/>
<p:calendar id="cdp" value="#{myController.cdp} required="true" pt:aria-describedby="aria-tooltip2"/>
<div id="aria-tooltip2" aria-hidden="false" class="aria-hidden">#{acc.tooltipCdp}</div>
<p:tooltip for="dat" value="#{acc.tooltipCpd}" position="right"/>
</div>
Related
With an inputMask component, you can't easily validate the date format, and you have to parse the string to a date/time in the background; whereas with the calendar component, you can set an input mask so the users can type the date; however when they click on the field it pops up the calendar.
What I would like, is for the keyboard-input functionality of the calendar control (masked input, bound to date object) to be kept, but without the physical calendar popup. Is there an option to do this?
What I currently have:
<p:calendar value="#{bean.someDateTimeBackingField}"
pattern="yyyy-MM-DD HH:mm"
timeZone="#{bean.tz}"
navigator="true"
mask="true" />
I am using Primefaces version 5.1
If you set the showOn="button" attribute, the popup won't show on focus. The user can either input a date or choose to pick it from the popup after touching the button.
If you want to hide the button, you might do so by CSS or set a value of the showOn attribute to something that does not exist:
<p:calendar value="#{bean.someDateTimeBackingField}"
pattern="yyyy-MM-DD HH:mm" timeZone="#{bean.tz}" mask="true"
showOn="trustlessComputing" />
I have a list of autocompletes that is rendered using a p:dataList. Something like shown below:
<h:panelGroup layout="block" id="outerPanel">
<p:dataList rendered="#{bean.myModel.listOfItems.size()>0}"
var="additionalMP"
value="#{bean.myModel.listOfItems}"
rowIndexVar="index" emptyMessage="">
<div class="wrapper ui-g">
<div>
<p:autoComplete
cache="true"
value="#{bean.myModel.listOfItems[index]}"
completeMethod ="#{handler.getAutoCompleteData}"
rendered ="true"
required="false"
scrollHeight="200"
styleClass="custom"
forceSelection="true">
<p:ajax event="query" global="false"/>
<f:attribute name="filter" value="filterName" />
<f:attribute name="mode" value="edit" />
</p:autoComplete>
</div>
<div>
<p:commandLink value="+ Add" actionListener="#{bean.addAutoComplete()}"
update=":formName:outerPanel"></p:commandLink>
</div>
</div>
</p:dataList>
</h:panelGroup>
So, the Add button inserts a new item in the list and I update the container panel so that the newly added item can be rendered on the UI.
As expected the panel is updated and I see another autocomplete on the UI. But the problem is, all the auto completes now don't work. i.e. they stop firing the query event and don't give any suggestions.
Edited: The partial response that updates the section of form with autocomplete fields, contains some script tags, which probably execute on page ready/load event. So I know that basically the newly added prime faces widgets are not being initialized.
Any idea how I can initialize the newly added autocompletes in the DOM?
The reason for all this trouble was an error in javascript that was caused by trying to scrollTo a particular element on the page from the bean. This crappy line of code in the bean was the source of all the trouble. There was no element on the page with the id messages. A glaring example of why UI should not be coupled in such a way.
RequestContext.getCurrentInstance().scrollTo("formId:messages");
I have form with input field:
<p:inputText id="M25BRAN" value="#{bean.value}" />
When user press "ENTER" form is submitted.
But after I added overlay panel (it is shown programmatically by a JS script function - onmousemove):
<p:overlayPanel id="M25BRAN_overlaypanel" widgetVar="M25BRAN_overlay_panel" for="M25BRAN" showEvent="null" hideEvent="null">
<h:outputText value="#{bean.memoText}" />
</p:overlayPanel>
When user press "ENTER", the small and empty overlaypanel is shown (small white rectangle). I am suspecting that this is the reason (red border):
http://s1.postimg.org/6u1mtn9fz/ovp.png
But I don't know why PF bunds this additional event handlers (onkey up/down). They are present only if overlaypanel is bound to component. How can I disable this additional events?
p: calendar not work correctly if after selecting the date in the restricted range can type in the text box and change to a date outside the range.
<p:calendar value="#{addFacturaMB.facturaUtilNew.fechaEmision}"
mindate="#{administrarMB.fechaInicio}"
maxdate="#{administrarMB.fechaFin}"
id="popupButtonCal1" showOn="button"
required="true" locale="es" effect="show"
navigator="true"/>
From what you described the <p:calendar> mindate and maxdate attributes are working correctly. They will only limit what date can be selected on the calendar pop up.
If you don't want the user to change the date with the text box you have a few options to stop this.
Set your calendar input text box to be read only. <p:calendar readonlyInput="true" />
Change your calendar mode to be inline <p:calendar mode="inline" /> so there is no input text box.
I'm using gmaps4jsf to show Google Maps in my application, but I would like to update the map after user type his/her stret, city, state and country. This way I could give more accurate information to gmaps4jsf dynamically.
But everytime I fill some of the fields, the maps it's gone. I'm doing this for instance with state:
State:<h:message id="m_state" for="state" styleClass="red" /><br/>
<h:selectOneMenu id="state" value="#{propertyC.property.addressState.state}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{addressB.states('US')}" var="state" itemValue="#{state.key}" itemLabel="#{state.value}" />
<f:ajax event="blur" render="m_state map" />
</h:selectOneMenu>
<br/>
// others fields
<m:map id="map" width="425px" height="250px" address="#{propertyC.property.street}, #{propertyC.property.addressCity.city}, #{propertyC.property.addressState.state}, #{propertyC.property.addressCountry.country}, #{propertyC.property.cep}" zoom="25" autoReshape="true" >
<m:marker>
<m:icon imageURL="http://i.imgur.com/WFJo62Q.png"/>
</m:marker>
</m:map>
How can I show the map dynamically as user type his/her address?
Yes, in order to change the map content dynamically using Ajax, you need to set partiallyTriggered attribute to true.
Check the JSF Mashup remix demo that uses GMaps4JSF 3.0.0 for seeing how you can update the map content using Ajax:
http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/theater2.xhtml
This is also the demo source code:
http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/theater2.xhtml.source
Try to set the following attribute: partiallyTriggered="true".
This will allow partial rendering, sepcially if you are using ajaxfied data submittion.