This question already has answers here:
Submit form with primefaces widgets on enter
(2 answers)
Closed 6 years ago.
I am trying to use primefaces but its not producing expected result. My code snippet is below
<h:form id="searchForm" styleClass="searchForm">
<p:panelGrid columns="3">
<p:commandButton id="left-overlay-btn" value="" styleClass="xschnapp-search-filter-menu" />
<p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />
<p:commandButton value=" " id="searchButton" action="#{cc.attrs.searchAction}" styleClass="xschnapp-search-action" />
</p:panelGrid>
<p:defaultCommand target="searchButton">
</h:form>
In Above code, when I press enter then it hits the first column button and not the expected search even after using primefaces p:defaultCommand.
http://blog.primefaces.org/?p=1787
Someone adviced me to use javascript to manually click search button, thats also failing. Perhaps due to my weak javascript knowledge. Below is code snippet with javascript and that also hit first column button instead of desired search button
<h:form id="searchForm" styleClass="searchForm" onkeypress="if (event.keyCode == 13) {document.getElementById('searchButton').click(); return false}">
<p:panelGrid columns="3">
<p:commandButton id="left-overlay-btn" value="" styleClass="xschnapp-search-filter-menu" />
<p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />
<p:commandButton value=" " id="searchButton" action="#{cc.attrs.searchAction}" styleClass="xschnapp-search-action" />
</p:panelGrid>
</h:form>
Can somebody please help me.
I have had the same problem defining global hotkey for my enterprise site. The aproach which worked for me is:
<h:form id="form">
<p:hotkey bind="Enter" update="msg" actionListener="#{yourBean.yourSearchfunction}"/>
<p:remoteCommand name="search" actionListener="#{yourBean.yourSearchfunction}" update="msg"/>
//Your code
</h:form>
<h:outputScript>
$(':input').bind('keydown', 'Enter', function () {
search();
return false;
});
</h:outputScript>
With this code regardless where your cursor stays it will start your search function on pressing enter. Maybe you want it a bit more finegrained then you can remove the p:hotkey component to only use to start your search function if the cursor is inside a input field.
The javascript is needed because the p:hotkey component works everywhere except if the cursor stays inside an input field. So you bind your remote comand to the enter event inside every inputfield in the view.
i'm trying to update (merge) a field from a ListDataModel and I'm experiencing what I think is a bug in Jsf (Mojara) 2.2. The update only works if the PrimeFaces command button is clicked twice. I've read a number of posts on here and tried the solutions but nothing seems to be working:
h:commandButton/h:commandLink does not work on first click, works only on second click
commandButton only works on the second click
p:commandButton with p:fileDownload and no ajax only works in second click
The list comes from
<h:form>
<p:dataTable value="#{proDocFolBean.selectedProDocs}" var="docs">
<p:column headerText="Document Name:">
<h:outputText value="#{docs.docName}"/>
</p:column>
<p:column headerText="Description">
<h:outputText value="#{docs.description}"/>
</p:column>
<p:column headerText="Date Created">
<h:outputText value="#{docs.dateCreated}">
<f:convertDateTime pattern="dd-MMM-yyyy" />
</h:outputText>
</p:column>
<p:column headerText="Classification">
<h:outputText value="#{docs.classification}"/>
</p:column>
<p:column>
*** <p:commandLink value="Update" action="#{proDocFolBean.prepareUpdateDoc}"/> ***
</p:column>
<p:column>
<p:commandLink id="downLoadLink" value="Download" ajax="false">
<p:fileDownload value="#{proDocFolBean.downloadFromFolders}"
contentDisposition="attachment"/>
</p:commandLink>
....
</h:form>
Clicking the Update link in the above form calls a preparedUpdate method in the bean:
public String prepareUpdateDoc() {
docToUpdate = selectedProDocs.getRowData();
selectedId = docToUpdate.getProjectDocId();
docsFacade.find(selectedId);
return "UpdateProDoc";
}
The above method populates the update form:
<h:outputScript name="js/formbugfix.js" target="head" />
<p:inputTextarea rows="30" cols="60" value="#{proDocFolBean.docToUpdate.description}" immediate="true"/>
<p>
<p:commandButton value="Change" action="#{proDocFolBean.updateProjectDoc}">
<!-- <f:ajax execute="#form"/> -->
</p:commandButton>
I included a js script although I realize that PF has already fixed view state through embedded js. I thought possibility including a script as stated in this question.
might solve the problem but it results in the same behavior.
Finally, the form calls the following merge method in the bean:
public String updateProjectDoc() {
docsFacade.update(docToUpdate);
return "ProSysHome";
}
If I try to use an h:commandbutton or set ajax to false using the p:commandButton (without the js script), the form is simply refreshed and the updated value is not merged into the database. If i use the p:commandButton on its own, I am able to get the operation working but only after two clicks. This is very odd behavior and would appreciate any help. Thanks in advance!
Well I think I solved this with Vsevolod's help. First it's totally unnecessary to use a separate js script because as Vsevolod says PF has its own fix.
Using p:commandButton alone I was getting a javascript error
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM94:25 Uncaught TypeError: Cannot read property 'debug' of undefined
It seems that this error comes from the original list form at the point I click the UPDATE link to call the prepareUpdateDoc method and populate the update form. Setting the ajax to false on this column solved the problem:
<p:column>
<p:commandLink value="Update" action="# {proDocFolBean.prepareUpdateDoc}" ajax="false"/>
</p:column>
The form now works after a single click but I would still like to know if the cause was due to two repeated ajax calls (one from the list form p:commandLink and the second from the actual update call by the p:commandButton) and why the js error disappears after setting ajax to false?
I had this "2 click" problem as well. In my case the solution was to use
<p:commandLink value="Update" id="sButton" action="#{myBean.myAction}" update=":myForm"/>
and not
<p:commandLink value="Update" id="sButton" action="#{myBean.myAction}">
<p:ajax event="click" update=":myForm"/>
</p:commandLink>
I had this problem, but in my case there was ajavax.faces.application.ViewExpiredException
Here is a good article about it javax.faces.application.ViewExpiredException: View could not be restored
I am using a SEAM based JSF web application. I have a simple form that includes a lookup (pop up window) that retrieves a Category name and ID (both are retrieved with no issues and are stored in myView). When the look up returns, the Category name is used to populate "selectedCategoryName" (using Jquery).
The issue comes when you try to submit the form, and another field fails validation (simple required field missing). All of my other fields remain unchanged, but selectedCategoryName is cleared (even though the bean still has it's value, so fixing the validation error and resubmitting resolves to a proper submit). So my question is, how can I maintain showing the value that's in "selectedCategoryName" when the form validation fails?
Thanks in advance!
<s:decorate id="selectedCategoryField" template="/layout/edit.xhtml">
<span>
<h:panelGroup rendered="#{! myView.persisted}">
<img class="lookup" src="${request.contextPath}/images/lookup.gif" width="15" height="14" alt=""
title="Category Lookup"
onclick="return openNewWindow('${CategoryLookupUrl}?#{myView.lookupParameters}', 'id');"/>
</h:panelGroup>
<h:inputText id="selectedCategoryName" required="true"
value="#{myView.selectedCategoryName}"
size="50"
readonly="true">
<a:support event="onchanged" reRender="selectedCategoryField" ajaxSingle="true"/>
<a:support event="oninputchange" reRender="selectedCategoryField" ajaxSingle="true"/>
</h:inputText>
</span>
The problem is, that actually the bean does not hold the selected value because of readonly="true". When you apply that property to an UIInput the UIInput will not be processed on a submit.
To fix this you can do the following:
If you use JSF2 you can use readonly="#{facesContext.renderResponse}" instead.
If not, define a method isReadonly on your backing bean and use readonly="#{myView.isReadonly}".
public boolean isReadonly() {
return FacesContext.getCurrentInstance().getRenderResponse();
}
Have a look at the following similiar question and especially the answer for more details on why this works:
Data in <h:inputText readonly="true"> disappears when command button is clicked
I have a list of values from ,from the list of values i want to check some values means at that corressponding text box will show in bottom.Otherwise the text box will be hidden.I have done this process using javascript. But my issues is i have to validate using required=true attribute. But the problem is the hidden text box also validated.
Primefaces pages for List values:
<p:selectManyCheckbox onchange="checkValue();" value="#{volunteerBean.knowAbt}" layout="pageDirection" id="s" immediate="true" required="true" requiredMessage="Select how to konws about cv?" style="width:300px;height:170px;">
<f:selectItems value="#{volunteerBean.hearLst}" var="he" itemLabel="#{he}" itemValue="#{he}" />
<p:ajax event="change" update="msg1111" />
</p:selectManyCheckbox>
Input Text Box coding:
<p:inputText style="display:none;" id="searchEngine" value="#{volunteerBean.searchEngine}"><p:watermark for="searchEngine" value="Search Engine"/>
JavaScript for hidden and show inputText through checking the list of checkBox:
function checkValue() {
var chk = document.getElementById("volunteerForm:s:10");
if (chk1.checked) {
document.getElementById('volunteerForm:searchEngine').style.display='';
}else {
document.getElementById('volunteerForm:searchEngine').style.display='none';
}
}
I am using primefaces 3.0 and jsf 2.0. How to solve it
You're changing only the HTML DOM tree and you're not changing the JSF component tree. JSF is not aware at all that the HTML element has been hidden in the client side. You need to show/hide the JSF component instead by its rendered attribute and include its client ID in the <p:ajax update>.
<p:selectManyCheckbox ... value="#{volunteerBean.knowAbt}">
<f:selectItems value="#{volunteerBean.hearLst}" />
<p:ajax event="change" update="msg1111 searchEngine" />
</p:selectManyCheckbox>
<p:inputText id="searchEngine" ... rendered="#{volunteerBean.knowAbt.contains('valueOfItem10')}" />
where valueOfItem10 is the exact value of the item at index 10, like as you tried to check in JS. Note that I assume that knowAbt is a List<String>, exactly as your hearLst suggests (for which I have removed the superfluous var, itemLabel and itemValue from the above example as they are the defaults already). Otherwise you'd need to perform the job in a helper method of the backing bean instead.
Why is it that a <form> with a single <input> field will reload the form when the user enters a value and presses the Enter, and it does not if there are 2 or more fields in the <form>?.
I wrote a simple page to test this oddity.
If you enter a value in the second form and press Enter, you'll see it reloads the page passing the entered value as if you called GET. why? and how do I avoid it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testFormEnter</title>
</head>
<body>
<form>
<input type="text" name="partid2" id="partid2" />
<input type="text" name="partdesc" id="partdesc" />
</form>
<p>2 field form works fine</p>
<form>
<input type="text" name="partid" id="partid" />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>
This is a little known "Quirk" that has been out for a while. I know some people have resolved it in various ways.
The easiest bypass in my opinion is to simply have a second input that isn't displayed to the user. Granted not all that user friendly on the backend, it does work to resolve the issue.
I should note that the most common place that I hear of this issue is with IE specifically and not with FireFox or others. Although it does seem to affect them as well.
This is a known bug in IE6/7/8. It doesn't appear that you will get a fix for it.
The best workaround you can do for this, is to add another hidden field (if your engineering conscience permits). IE will no longer auto-submit a form when it finds that there are two input-type fields in the form.
Update
In case you were wondering why this is the case, this gem comes straight out of the HTML 2.0 specification (Section 8.2):
When there is only one single-line text input field in a form, the
user agent should accept Enter in that field as a request to submit
the form.
No, the default behaviour is that on enter, last input in the form is submitted.
If you don't want to submit at all you could add:
<form onsubmit="return false;">
Or in your input
<input ... onkeypress="return event.keyCode != 13;">
Of course there are more beautiful solutions but these are simpler without any library or framework.
Pressing Enter works differently depending on (a) how many fields there are and (b) how many submit buttons there are. It may do nothing, it may submit the form with no 'successful' submit button, or it may pretend the first submit button was clicked (even generating an onclick for it!) and submit with that button's value.
For example, if you add an input type="submit" to your two-field form, you'll notice it too submits.
This is an ancient browser quirk going back at least as far as early Netscape (maybe further), which is unlikely to be changed now.
<form>
Invalid without an ‘action’. If you don't intend to submit anywhere, and you don't need radio button name grouping, you could just completely omit the form element.
Here is the code that I used would use to solve the problem:
<form>
<input type="text" name="partid" id="partid" />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>
It's not reloading the page as such, it's submitting the form.
However, in this example because you have no action attribute on the form it submits to itself which gives the impression of reloading the page.
Also, I can't repro the behaviour you describe. If I am in any text input in a form and I press Enter it submits the form, no matter where in the form the input is located or how many inputs there are.
You might want to try this out some more in different browsers.
as vineet already said, this is rooted in the html 2.0 specification:
here is how to prevent this from happening without screwing up your urls:
<form>
<input type="text" name="partid" id="partid" />
<input type="text" style="display: none;" />
</form>
Thanks to everyone who answered. It's an eye opener that a form with a single field acts differently then a form with many fields.
Another way to deal with this automatic submit, is to code a submit function that returns false.
In my case I had a button with an onclick event, so I moved the function call with the added return keyword to the onsubmit event. If the function called returns false the submit won't happen.
<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid" />
<input type="submit" value="Find Part" />
</form
function ajaxMagic() {
...
return (false);
}
The solution I found for all of the browsers that I tested (IE, FF, Chrome, Safari, Opera) is that the first input type=submit element on the form has to be visible and has to be the first element in the form. I was able to use CSS placement to move the submit button to the bottom of the page and it did not affect the results!
<form id="form" action="/">
<input type="submit" value="ensures-the-enter-key-submits-the-form"
style="width:1px;height:1px;position:fixed;bottom:1px;"/>
<div id="header" class="header"></div>
<div id="feedbackMessages" class="feedbackPanel"></div>
...... lots of other input tags, etc...
</form>
This problem occurs in both IE and Chrome.
It does not occur on Firefox.
A simple solution would be to add the following attribute to the form tag:
onsubmit="return false"
That is, of course, assuming that you submit the form using an XMLHttpRequest object.
Yes, form with a single inputText field working as different in HTML 4.
onSubmit return false not working for me but the below fix bug is working fine
<!--Fix IE6/7/8 and HTML 4 bug -->
<input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />
I handled this by the following code but I am not sure if this a good approach.
By looking for input fields in a given form and if its 1 prevent the default action.
if($j("form#your-form input[type='text']").length == 1) {
$j(this).bind("keypress", function(event) {
if(event.which == 13) {
event.preventDefault();
}
});
}
I think that's a feature, which I did also disable it though. It's not taking big effort to disable it. Just capture the enter key, ignore it, will do.