I want to bind the value in my inputtext so that i can the value inside this inputtext in a function and that should only happend if pressed enter on my inputtext.
Any ideas ?
I used this combination but the textvalue in the inputtext did not set as in the field:
<p:remoteCommand name="setInListElement"
actionListener="#{bean.addToInList(bean.inText)}"/>
<h:inputText value="#{bean.inText}"
onkeypress="if (event.keyCode == 13){ setInListElement; return false; }"/>
Thanks in advance
Related
I have a problem with the function that disables the button. When I click button number one and it does not return the expected value - empty file, I want that button number two should be turned off.
However, it is not. The button number two is turns on and lets you download an empty file. What am I doing wrong?
file.xhtml
<p:commandButton value="Button1" update="#form" actionListener="#{test.generate}" ajax="true" />
<p:commandButton value="Button2" actionListener="#{test.download}" ajax="false" disabled="#{test.disableButton} />"
public boolean getDisableButton() {
return result == null ? true : false;
}
I'm doing Primefaces 5.1. In my page use two commandButton Add,Edit button and username Text field. When I press enter in username text field script to perform editbutton click want perform.But it will perform addButton click.I try below code:
<h:head>
<script>
function callEvent(evnt)
{
if(event.keyCode==13)
{
$('editbutton').trigger('click');
}
</script>
</h:head>
<h:form>
<p:inputText id="userNameField" onkeyPress="callerEvent(event)"/>
.....
....
<p:commandButton id="addButton" value="Save" action="#{user.saveButton}"/>
<p:commandButton id="editbutton" value="Edit" action="#{user.editButton}"/>
</h:form>
When I press enter in textfield it will not perform editbutton only trigger with first button that is addbutton.If I change position of button i.e editbutton is first it will perform editbutton.
You can try with:
<h:form id="user-form">
and:
<script>
function callEvent(event) {
if(event.keyCode==13) {
$('#user-form\\:editbutton').click();
return false;
}
</script>
See also:
Default action to execute when pressing enter in a form
There are two issues in your code:
1. function name is callEvent, but you are using callerEvent with text field keyPress event.
2. id selector for editbutton is not correct to get element.
You can simply do it with jQuery like selector (ends-with) as following:
<p:inputText id="userNameField" />
$("input[id$='userNameField']").on('keypress', function(event) {
var keycode = event.keyCode ? event.keyCode : event.which;
if(keycode == '13')
$("input[id$='editbutton']").get(0).click();
});
How to toggle disable in primefaces components selectOneMenu and calendar ?
Question is when user inputs value in calendar then selectOneMenu should be disabled. But when he removes value from calendar selectOneMenu should be enabled again.
I have tried with this solution but since those components dont have action attribute I couldnt figure it out.
I dont have validation button I wolud like to use some event.
You could use the ajax event to find out if the value has been changed.
<p:calendar ... >
<p:ajax event="change" listener="#{bean.dateChange}" update="selectOneMenuId"/>
</p:calendar>
Then use something like this in your bean:
private boolean disableSelectOneMenu = true;
public void dateChange(DateSelectEvent event) {
Date date = event.getDate();
if (date == null) {
disableSelectOneMenu = true;
} else {
disableSelectOneMenu = false;
}
}
and use the disableSelectOneMenu property in you disable tag of you selectOneMenu.
Both <p:calendar/> and <p:selectOneMenu> has disabled properties. Both component has ajax events, <p:calendar/> has dateSelect and <p:selectOneMenu/> has change.
So, you need to make a bean method which will return true or false according to which selection has been made and bind it to disabled properties and update these components when selection has been made.
For example JSF part:
<p:calendar id="calendar" value="#{bean.calendar}" disabled="#{bean.calendarDisabled}">
<p:ajax event="change" update="selector calendar" process="#this"/>
</p:calendar>
<p:selectOneMenu id="selector" disabled="#{bean.calendarDisabled != true}">
<p:ajax event="change" update="selector calendar" process="#this"/>
</p:selectOneMenu>
And bean part:
public boolean calendarDisabled(){
if(calendar != null){
return false;
}else{
//...do whatever you needs basing on your requirements
}
}
Also please take a look at Primefaces manual
I am trying to understand popup menu in richfaces. I am trying to do the following: I have a textbox and a button. I write some text into the textbox, and if the value of the text written is "popup", i want to call the popup menu. Here is the code:
<h:form>
<h:inputText value="#{popupCall.text}"></h:inputText>
<a4j:commandButton action="#{popupCall.showpopup()}" onclick="if (#{popupCall.showpopup()}) #{rich:component('popup')}.show();">
</a4j:commandButton>
</h:form>
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide();
return false;">
X
</h:outputLink>
</f:facet>
</rich:popupPanel>
and the bean:
#ManagedBean (name="popupCall")
#VievScoped
public class PopupCall {
private String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public PopupCall() {
}
public void checkText(){
if(text.equals("popup")){
//CALL POPUP MENU
}
}
public boolean showpopup(){
if(text!=null && text.equals("popup"))
return true;
else
return false;
}
}
If i don't put "if(#{popupCall.showpopup()})" inside the onclick method it always calls when button is pressed but now even though the showpopup()method returns true no popup is shown. Also, inside the showpopup() method, if i just write return true, the if statement inside onclick works but now it does not.
Can anyone help me with this? Thanks
For your case you want to use oncomplete instead of onclick since you want to show <rich:popupPanel> after executing some business logic. When I changed
onclick="if (#{popupCall.showpopup()}) #{rich:component('popup')}.show();"
to
oncomplete="if (#{popupCall.showpopup()}) #{rich:component('popup')}.show();"
The pop up showed up. Also be careful with
action="#{popupCall.showpopup()}"
Remember that action needs String (or null) for navigation but
showpopup() is returning a boolean so you might want to fix that.
I found these links to be helpful check them out (for the first link, I liked the one with the highest vote).
Primefaces onclick and onsuccess differences
EL expression inside p:commandButton onclick does not update/re-render on ajax request?
JSF 2.0, Mojarra 2.0.1, PrimeFaces 3.4.1
Here is a p:inputText component which is expected to call a backing bean method when the enter key is pressed.
<p:inputText id="commentInput" rendered="#{status.haveComment}"
value="#{statusBean.newComment}"
onkeypress="if (event.keyCode == 13) { onchange(); return false; }">
<f:ajax event="change" listener="#{statusBean.test}" />
</p:inputText>
While backing bean has the method of:
public void test(AjaxBehaviorEvent event) {
System.out.println("Pressed enter!");
}
It's calling method when enter key is pressed but it has more than this; unexpected behaviour case:
--Click input text
----Type some letters
------Click somewhere else in the page
--------CONSOLE: Pressed enter!
I think ajax event=change detects a change somehow and calls the method. How to convert this p:inputText component into a proper comment taker component like Facebook or others has?
This is the way how onchange event works in HTML. It is happening when text in input element is changed, but is fired when component loses focus (in your case that is the moment when you click somewhere else in the page).
You can define p:remoteCommand for test method and just write:
<p:remoteCommand name="test" actionListener="#{statusBean.test}"/>
<p:inputText id="commentInput" rendered="#{status.haveComment}"
value="#{statusBean.newComment}"
onkeypress="if (event.keyCode == 13) { test(); return false; }"/>
and in backing bean:
public void test() {
System.out.println("Pressed enter!");
}
With newer PrimeFaces versions (5+ at least) you can use p:defaultCommand instead of scripting. Though you can't use p:remoteCommand then, because p:defaultCommand needs something clickable.
<p:inputText id="input" />
<p:defaultCommand target="submit" />
<!--you can show the button to allow the user to click too, or hide it with display: none-->
<p:commandButton id="submit" style="display: none;" process="input" />
By default p:defaultCommand applies to the whole form. You could limit it with the scope attribute.