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?
Related
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'm trying to update a primefaces dialog every time it pops up.
The dialog is triggered by a calendar field changing and the actual call is made from the bean.
When I call it the first time, the datas are fine but, if I close it and open it again, it'll still show the old datas.
It kinda makes sense: it's rendered just once and then it's shown and hidden and never actually updated.
I was thinking about updating it before the dialog.show() in the bean, but I don't know how to do that.
Any idea?
<p:dialog
site ="sectionDlg"
widgetVar ="Dlg"
minWidth ="430"
modal ="true"
closable ="true"
resizable ="false"
dynamic ="true"
width="450" height="300"
>
<h:form id="Form">
<br/>
<p:panelGrid id ="dates" styleClass="cmt-no-grid-100perc" columns="4">
<calendar attribName ="offerStartDateDlg"
value ="#{bean.startDate}"
writable ="#{false}"/>
<calendar attribName="offerEndDateDlg"
value="#{bean.endDate}"
writable="#{false}"/>
</p:panelGrid>
<div align="center">
<p:commandButton
onclick ="PF('whichSectionDlg').hide()"
>
</p:commandButton>
<p:commandButton
onclick ="PF('whichSectionDlg').hide()">
</p:commandButton>
</div>
</h:form>
This could make things easier
Ok so, I managed to figure it out.
I solved it by updating it from the bean, right before the call
public void show_dlg_method(){
RequestContext.getCurrentInstance().update("Dlg");
RequestContext.getCurrentInstance().execute("PF('Dlg').show()");
}
with "Dlg" being the widgetVar attribute value.
Some code of what you already have is always helpful. However, depending on what triggers the dialog to show up you can:
add an update to the triggering link/button/whatever or
initiate the update by the dialog itself like shown below.
<h:form>
<p:remoteCommand name="updateDialog" update="dialogpanelid" />
</h:form>
<dialog onShow="updateDialog">
<p:outputPanel id="dialogpanelid"> your content here </p:outputPanel>
</dialog>
Note that:
You need the remoteCommand to reside inside h:form
You should always update the dialogs content, not the dialog itself
the client-side id might differ depending on your page structure.
I need to have my primefaces p:commandLink submit a h:form when the user presses the enter key.
I tried the solutions suggested here and in a couple of other places. I also tried the primefaces defaultCommand. No matter what I try, the browser seems to notice the button press, but the action is not performed.
These are my form's widgets:
<p:autoComplete id="acSimple" value="#{home.searchKeywords}" completeMethod="#{home.completeText}" style="" />
<p:commandLink id="srchbutton" action="#{home.goToSearchResults}" onclick=" $('.prgrs').show();">
<h:graphicImage id="srch" name="images/searchbutton.jpg" class="img-responsive" style="display: inline-block; margin-left:0px; margin-bottom:-0px;" />
</p:commandLink>
<p:defaultCommand target="srchbutton" />
<h:form onkeypress="if (event.keyCode == 13) { document.getElementById('form:srchbutton').click(); return false; }">
Make sure your real id of link is "form:srchbutton" or put whatever it is.
You can use developer tools or firebug to find it out.
Dijana's solution is right, but the action onkeyup should be used and not onkeypress.
ENTER is an action event so it will not be caught by onkeypress which captures basic and meta characters.
So you need onkeydown (which can cause problems if ENTER is down even after the next page loads) or onkeyup.
I have a button in primefaces, that when is pressed I make some calculations and a new panel should appear showing the results.
I have the code
<p:commandButton value="Submit"
ajax="false" actionListener="#{myBean.search}" oncomplete="panelwv.show();">
</p:commandButton>
<p:panel widgetVar="panelwv" visible="false" closable="true"
toggleable="true">
So, when the button is clicked, the MyBean.search method is called, and when is finished I want the panel "panelwv" to appear, but it does not.
What am I doing wrong?
Thank you!
oncomplete can only be executed if ajax is true. Otherwise the whole page is reloaded. You will probably also want to update the contents of your panel by giving it an id and setting the update property of the command button to this id.
I have a JSF2 application and a page with the following code:
<h:inputText id="someInput" required="true" />
<p:outputPanel id="itemsPanel">
<ui:repeat var="i" value="#{myBean.itemIndices}" id="items">
<h:inputText
id="itemInput"
value="#{myBean.dataItems[i]}"
/>
<h:panelGroup
layout="block"
styleClass="clear"
rendered="#{((i+1) % 10 == 0)}"
/>
</ui:repeat>
</p:outputPanel>
<br/>
<p:commandButton
classStyle="btn"
value="Add Row"
actionListener="#{myBean.increaseItemsCount}"
update="itemsPanel"
immediate="false"
ajax="true"
/>
The ui:repeat is dynamically rendering a number if text boxes depending on the itemIndices and dataItems properties. The "Add Row" button calls a method that will dynamically increase the number of itemIndices and dataItems, therefore additional text inputs appear.
The current code will not work if there is no value in the text box someInput, because the AJAX request also validates the form and validation fails. Pressing the button in this case has no visual effect, not even feedback for the user that validation did not pass (because I update itemsPanel only).
If I change the button to have immediate="true", then the validation issue is no more. Unfortunately, I want to be able to restore the values of the dynamic input fields that the user might have changed prior adding the new row. The immediate="true" attribute causes the form not to be submitted to the server, therefore the user-entered data will not be persisted.
A possible solution to this could be to add process="all dynamic input ids csv" attribute to the command button and set the immediate attribute back to true. This will cause the server to validate only the inputs specified in the process attribute and they will be persisted. The problem here is that these input ids are dynamically generated by JSF and I cannot come up with a proper way to get them as a CSV. I would also not prefer a solution for dynamically generating ids in myBean relying on assumptions of how JSF would output them.
All suggestions will be greatly appreciated.
You could use process="itemsPanel".
<p:commandButton
classStyle="btn"
value="Add Row"
actionListener="#{myBean.increaseItemsCount}"
process="itemsPanel"
update="itemsPanel"
ajax="true"
/>
You should only move the command button into <h:outputPanel id="itemsPanel">.