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.
Related
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 assume this is a rather simple issue, but I'm very new to Primefaces. I have a form that's including a few Primefaces tabs. Naturally I can view each tab when I click on it, but I'm looking for a way to go to a certain tab when a commandButton is clicked. Is there any way to do this?
Basically I'm looking for something like:
<h:commandButton value="Submit"
onclick="<open a certain tab>"
action="#{doSomeJavaWork}"
update=":main_tabs:some_form" />
Thanks!
<h:commandButton ... onclick="tabViewWidgetVar.selectTab(2);" .../>
I am createing page using JSF 2.0:
<h:selectBooleanCheckbox id="checkbox1" title="Published"
onclick="#{StageGate.setMyCheckboxValue()}" />
I was expecting setMyCheckboxValue() to be called whenever checkbox is clicked. However, setMyCheckboxValue() is called once when page is loaded.
If I write
<h:selectBooleanCheckbox id="checkbox1" title="Published"
onclick="#{StageGate.setMyCheckboxValue()}; alert(document.getElementById('checkbox1').checked);" />
I get alert for each click.
My Question is: When I am getting alert, why setMyCheckboxValue() is not getting called on each onclick event?
Note: I also tried AJAX, but the checkbox remains constant.
The onclick attribute is for client side (javascript) methods and will not change anything on the server side.
If you want to change a server side value you need the value attribute:
<h:selectBooleanCheckbox value="#{StageGate.myCheckboxValue}" .../>
Note that I changed your setMyCheckboxValue() to myCheckboxValue because the setter method is automatically detected by jsf (if you correctly define your variable foo with the getter getFoo() and the setter setFoo(...))
onclick is used for client side javascript calls.
I think you want to call a function on server side, when a checkbox is clicked.
Here is the code:
<h:selectBooleanCheckbox id="checkbox1" title="Published"
value="#{StageGate.myCheckBox}" >
<f:ajax event="change" execute="#this"
action="#{StageGate.setMyCheckboxValue()}" />
</h:selectBooleanCheckbox>
I hope this will work for you.
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">.
I have a simple HTMLCommandButton that I want to cause a rerender to another component.
I know of a simple way to do that - add an ajax support object and have it run on "onclick" event and rerender.
<h:commandButton value="Submit" action="#{actions.submitToDB}">
<a4j:support event="onclick" reRender="Button0" />
</h:commandButton>
I figured there has to be a smarter way to do this with the on* attributes of the HTML CommandButton but I'm not sure what to write to cause the rerender (Using this alleged method)
Thanks!
No, there isn't a smarter way in the common case. This is the way to do it. You will have to do the following
set type="button" on the button.
set the action on the <a4j:support> rather than on the button istself.
In this particular case (a button) a shortcut will be:
<a4j:commandButton value="Submit"
action="#{actions.submitToDB}" reRender="Button0" />