Below is my code:
<h:form>
<p:autoComplete id="autoCompleteID" value="#{myBean.item}"
completeMethod="#{myBean.completeMethod}"
</p:autoComplete>
<h:commandButton action="#{myBean.searchRelatedItems}"/>
</h:form>
Here my scenario is like standard Google search, I can see related Items in suggestion and also redirect another page based on text typed in p:autoComplete text field. Its works fine by click on Button, but I also want to achieve by hitting ENTER in p:autoComplete text field.
A late answer, but I will just leave it here...
Try using a Primefaces commandButton, it is p:commandButton, not h:commandButton.
Make sure the attribute type of the commandButton is "submit" and not "button", "submit" is the default in Primefaces.
Lastly a certain (but nasty I believe) solution is to put an id at the commandButton like "search-button" and an id at the h:form like "searchForm" and put the following at the p:autoComplete or h:form onkeyup="if (event.keyCode === 13) { document.getElementById('searchForm:search-button').click(); return false; }"
Similar topic: Submit form with primefaces widgets on enter
Related
I have to validate that a field in a form is not empty.
The problem is that the form is in a JQueryUI dialog (since I don't know how to create "windows" in JSF), so when I click the commandButton the page is refreshed and the JQuery dialog is lost. After refreshing, I can see the error message was printed in the page code by looking at the source code. If I use ajax in the commandButton then the page is not refreshed but I don't get the message printed, I got it as a sort of "Javascript alert" in the browser.
How can I get the error message without refreshing the page?
<h:inputText value="#{myController.name}" id="myname" required="true" requiredMessage="Name required">
<f:ajax />
</h:inputText>
<h:message errorClass="..." for="myname" />
Note: This looked similar to my problem but I don't think the solution is what I'm looking for.
Note: I am not using additional libraries like Primefaces, etc
With the hint of the comment, I was able to solve it this way:
In the commandButton, use ajax with both render and execute (render only doesn't work):
<h:commandButton id="...." action="#{myController.doSomething()}" type="submit" value="Do something">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
Create a "pageUpdate()" method in myController that is called at the end of myController.doSomething(). This way, after the actions, the page is refreshed and the dialog is gone. There are of course other ways to close the dialog, but it is convenient for me to update the page when there is no error in the dialog action, so my objects in memory are updated too.
I think JQuery dialog messes with my styles after the ajax call returns with error, so check that out if you do it.
Is it possible to fire action,actionListener of a <p:commandButton> with attribute type="button". I have a requirement where in a form there are text boxes and command buttons. If I press enter in any text box then commandButton is invoked. So I change all command buttons type to "button". Now problem I am facing that command button's action, actionListener not firing.I want to solve it with out using java script. Also I read this This Link. Can any one tell me where I should edit or change to get expected output. Thanks.
Using type="button" is the wrong solution to prevent enter key from submitting the form. It basically changes the submit button to a dead button which does not submit the form and is only useful for attaching JavaScript onclick and likes. You're simply facing the consequences of this wrong solution. You should not try to fix it, but take a step back and solve the initial problem the right way.
One of the ways is:
<h:form onkeydown="return event.keyCode != 13">
Or, more generically, with jQuery, which skips textareas from the restriction:
$(document).on("keydown", ":input:not[textarea]", function(event) {
return event.keyCode != 13;
});
Note: jQuery is already bundled in PrimeFaces, you do not need to install any scripts separately. Also note that you really can't go around JavaScript here. Even more, PrimeFaces/ajax components rely on JavaScript and wouldn't work anyway without JavaScript.
In our application we are displaying the menus dynamically. We have the menu object(menuitems in below code) populated with all the menu items (read from an xml). The home page then generates the menus by usinng ui:repeat. Insdie ui:repeat there are p:commandlink.
Below is the code
<h:form id="mainMenu">
<h:panelGroup id="MMPanel" layout="block" styleClass="left_menu">
<ui:repeat var="node" value="#{menuitems.level1menus}">
<p:commandLink immediate="true" styleClass="menu"
action="#{menuitems.onLevel1MenuChange(node.id)}"
update=":pageTitle :menuLevel2 :menuLevel3" title="#{node.name}"
rendered="#{menuitems.selectedLevel1.id!=node.id}" onclick="menuSelect(this)">
<span class="icon icon_#{node.name}"></span>
<span class="text">#{node.name}</span>
</p:commandLink>
<p:commandLink immediate="true" styleClass="menu activelink"
action="#{menuitems.onLevel1MenuChange(node.id)}"
update=":pageTitle :menuLevel2 :menuLevel3" title="#{node.name}"
rendered="#{menuitems.selectedLevel1.id==node.id}" onclick="menuSelect(this)">
<span class="icon icon_#{node.name}"></span>
<span class="text">#{node.name}</span>
</p:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
The menuitems bean is at Session level.
There are two diffeent p:commandlink inside ui:repeat. The only difference between the 2 is in the styleclass and rendered attribute. This is done to identify the default menu item when the user logs for the first time and give it an extra css of "activeLink".
The java script called on onclick is given below (in case it is required)
function menuSelect(selectOne){
$(".left_menu>a").removeClass("activelink");
$(selectOne).addClass("activelink");
removeAllChannels();
}
function removeAllChannels(){
$.atmosphere.unsubscribe();
}
The removeAllChannels is to remove primepush autorefresh channels we have.
The issue i am facing is this.
All the links are getting rendered correctly and in Firebug i see all of them have the same html.
But the one which is generated with the extra css "activeLink" (through rendered condition -- menuitems.selectedLevel1.id==node.id) is not working. Nothing happens when i click this default link. All other links work fine.
So when i click on a different link, it takes me to the required page. But when i click back on the menu which was default, nothing happens
I added a Custom phase listener and saw that all the lifecyle stages are called when this link is clicked but the action method is not.
I went through the links this and this but could not figure out the issue.
Please help.
Do tell me if something is not clear
As part of safeguard against tampered/hacked requests, the JSF component's rendered attribute is re-evaluated during processing the form submit. In case of a command link/button, if it evaluates false, then its action won't be queued/invoked. This matches the symptoms you're seeing.
This can in turn happen if the managed bean #{menuitems} is request scoped and/or when the properties behind #{menuitems.level1menus} or #{menuitems.selectedLevel1} are incompatibly changed during the postback request.
Putting the bean in the view scope and ensuring that the getters do not do any business job should fix this problem.
See also:
How to choose the right bean scope?
commandButton/commandLink/ajax action/listener method not invoked or input value not updated - point 5 applies to you
i want to have a click-able images, which change on roll-over/out/click. needless to say, i want that after the 'onclick' the page won't reload.
i'm trying to accomplish this with either h:image or h:commandButton - both don't work as expected.
the most annoying this is this:
i have in my code-bean the following simple function:
public String getClick()
{
return "alert('abc')";
}
and in the jsp file, the following code:
<td><h:commandButton id="a" type="button" value="click" onclick="#{CodeBean.click}" /></td>
<td><h:commandButton id="b" type="button" image="/resources/empty.jpg" onclick="#{CodeBean.click}" />
upon click, both raise the alert box, however, only the second one reloads the page, while the first one doesn't. don't know what i has to do with it, but when i look at the compiled page's source, i see that the first button's type stays 'button', but the second one is turned into 'image'.
any suggestions?
cheers,
eRez
The default behaviour of the <h:commandButton> (and <h:commandLink>) is to submit the parent POST form which is specified by <h:form>.
The onclick attribute just allows the developer to execute some piece of JavaScript code right before the form is been submitted. It does by default not block the form submit. If you'd like to block the button's default behaviour (submitting the form), then you'd need to add return false; to the onclick.
In case of <h:commandButton>, the component's type attribute defaults to submit and it will generate a HTML <input type="submit">. When you change it to button, then it will be turned in a "dead" button which does basically nothing, expect of executing any JavaScript handlers attached to it, and it will generate a HTML <input type="button">. When using the component's image attribute, then it will be turned in an image map which allows you to submit the X,Y position of the cursor relative to the image (however, in your case you seem to want just a background image; in that case you should actually be using CSS background-image instead) and the component's type attribute will be ignored and it will generate a HTML <input type="image">.
This is all clearly documented in Encode Behavior section of the tag documentation.
If your sole requirement is to block the <h:commandButton type="image"> from submitting the parent form, then you need to add return false; to the onclick, as said before:
<h:commandButton image="/resources/empty.jpg" onclick="#{CodeBean.click}; return false;" />
An alternative is to use type="button" in combination with a CSS background image (so that you aren't abusing the image attribute):
<h:commandButton type="button" styleClass="emptyButton" onclick="#{CodeBean.click}" />
with the following in a CSS file which is loaded by <h:outputStylesheet>:
.emptyButton {
background-image: url(#{resource['empty.jpg']});
}
I have a problem in IE. Hitting enter when the focus is on the last input control sends the focus to the "Next" button. This submits the form. So far, so good.
The code in my base class WizardController looks to see if the Next submit button is null, as follows:
protected string NextButton
{
get
{
return ControllerContext.HttpContext.Request.Params["NextButton"];Nex
}
}
However, despite the form submitting, this property returns null unless the user explicitly clicks on the button with his mouse.
This is blatantly wrong, but I have no idea why it is happening.
EDITED TO SPECIFY THE PRECISE PROBLEM:
The problem only occurs IF there is ONLY one TEXT input control in the HTML form that gets rendered to the browser.
END EDIT
Andrew
I have finally found an explanation for my problem:
It seems to be a bug in IE, whereby if there is a single text input in the rendered HTML form, then IE will not submit the form properly. The issue is described (briefly) at:
Form Submit via Enter Key when using IE
In the above link, no description is given as to why the bug occurs, or since what version of IE, so a blanket solution is better.
The workaround suggested in the article is to add a css hidden text input (with conditionals for IE):
<!--[if IE]>
<input type="text" style="display: none;" disabled="disabled" size="1" />
<![endif]-->
This worked for me, so issue solved.
The following is included to document the issue as I experienced it:
Unlike the problem described in the article, my form did submit. However, when I tried to check which button had been accessed by hitting tab or enter key, no submit button was in the HttpContext.Request.Params collection. So the behaviour I saw was slightly different.
What the above article did identify is that this behaviour is only seen WHEN there is ONLY one text input control. A single check box, for example, does not cause the problem.
I hope that this documents the problem adequately... and that MS will one day correct the bug.
A simple work around might be to use a hidden form element and depend on that rather than the button.
<input type='hidden' name='action' value='next' />
If you have multiple buttons you can always use JavaScript to change the value of the action element just before submitting.