Mojarra 2.1.5 / PrimeFaces 3.5
I dont know how to explain that.I have one inputText and commandButton
When I type something in inputText and hit Enter I need the commandButton be executed automatically.
<p:inputText id="txtProducao" required="false"
value="#{ManagedBean.xxxPreco.producaoDia}"
requiredMessage="#{bundle.xxPreco_xProdx}>
</p:inputText>
<p:commandButton id="buttonProducaoDia"
icon="ui-icon-check"
actionListener="#{ManagedBean.calculaProdxxx}"
update="txtValorSoma">
</p:commandButton>
I need to type some value for each inputText and after hit Enter I need the respective commandButton be executed :
If you have a single p:commandButton, then pressing ENTER should submit the form. If you have many p:commandButton in the form. You can define the one which is the default submitted button by using the p:defaultCommand.
<p:inputText id="txtProducao" required="false"
value="#{ManagedBean.xxxPreco.producaoDia}"
requiredMessage="#{bundle.xxPreco_xProdx}>
</p:inputText>
<p:commandButton id="buttonProducaoDia"
icon="ui-icon-check"
actionListener="#{ManagedBean.calculaProdxxx}"
update="txtValorSoma">
</p:commandButton>
<p:defaultCommand target="buttonProducaoDia" />
[Edit]
I think that you have to solve it using JavaScript, like this:
<p:inputText id="txtProducao" required="false"
value="#{ManagedBean.xxxPreco.producaoDia}"
requiredMessage="#{bundle.xxPreco_xProdx}>
<p:ajax event="keydown" update="#form" onstart="if (event.keyCode != 13) { return false; }" />
</p:inputText>
You can also add an actionListener to the p:ajax element. In JavaScript, you could also call a submit.
Related
I have a InputText inside a Dialog as:
<p:dialog header="Demo Header"appendTo="#(body)"
widgetVar="sectionDialog" id="section_Dialog"
modal="true">
<h:panelGroup id="myPanel">
<h:panelGrid columns="4">
<h:outputLabel value="Count: "/>
<pe:keyFilter mask="num" for="count" />
<p:inputText id="count"
value="#{myBean.countValue}" converter="spaceConverter">
</p:inputText>
<p:commandButton id="btnId" process="#this"
update="secondPanel" value="ADD" icon="ui-icon-check"
action="#{myBean.generateDataTableBasedOnCount()}" ajax="true"
partialSubmit="true">
</p:commandButton>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup style="border:0" id="secondPanel">
...// data table generated based on Input Count.
</h:panelGroup>
</p:dialog>
If I keep the InputText and Button outside the dialog, it works like a charm.
But when I keep them inside the Dialog, myBean.countValue always stores the previous input value.
When I refresh the page and enter a new value, Old Value is being stored in the bean.
What am I missing here?
PrimeFaces : 5.3
PrimeFaces-Extension : 4.0.0
JSF : 2.2.8
You need to ResetInput of the dialog before you open it.
See: https://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
So on the button that opens your dialog... Its better to reset the FORM but I didn't see the h:form in your example code above.
<p:commandButton value="Open Dialog" update="section_Dialog">
<p:resetInput target="section_Dialog"/>
</p:commandButton
In a form I have a p:inputText and a p:colorPickeras following :
<h:outputText value="#{messages.titre}" />
<p:inputText value="#{beanPlanningRessource.equipe.typeRessource.titre}">
</p:inputText>
<h:outputText value="#{messages.couleur}" />
<p:colorPicker value="#{beanPlanningRessource.equipe.typeRessource.couleur}">
</p:colorPicker>
And I have a p:commandButton which call a managedBean method as following :
<p:commandButton widgetVar="ajouter_equipe"
style="visibility: hidden;"
actionListener="#{beanPlanningRessource.ajouterEquipe()}" process="#this"
update=":#{p:component('dataTableEquipe')}, :#{p:component('formEquipe')}, :msgs" >
</p:commandButton>
The problem here is that the value in the p:inputText and p:colorPicker are always null in the managed bean, so in the p:inputText I added this line :
<p:ajax event="change" process="#this" />
and nowbeanPlanningRessource.equipe.typeRessource.titre is updated with the value in the p:inputText.
The problem I still have is that the p:colorPicker is a non-ClientBehaviorHolder component so I can't attach p:ajax to it and neither a f:ajax', so the value attached to thep:colorPicker:(beanPlanningRessource.equipe.typeRessource.couleur`) is always null.
How can I solve this?
Beside jquery you can also use the valueChangeListener
html:
<p:colorPicker valueChangeListener="#{beanPlanningRessource.colorChanged}" value="#{beanPlanningRessource.equipe.typeRessource.couleur}"/>
bean:
colorChanged(ValueChangeEvent event){
String newColor = event.getNewValue();
//do whatever you want with the new value
}
I'm trying to use PrimeFace ajax for enable/disable the submit button and it works fine except it also resets all my p:inputText .
Here is my code:
<p:inputText value="#{loginTo.emailAddress}"
id="emailAdd"
tabindex="1"
required="true"
maxlength="50"
requiredMessage="#{appLoginParameter['AppLoginEmailRequiredMsg']}"
validatorMessage="#appLoginParameter['AppLoginEmailIncorrect']}">
</p:inputText>
<p:selectBooleanCheckbox id="eSignatureCheckBox"
value="#{loginTo.userLoginDetailTO.resetEsignFlag}"
rendered="true"
styleClass="acc-lable-name-check1">
<p:ajax event="change" update="submitButton"></p:ajax>
</p:selectBooleanCheckbox>
You are missing a opening { in:
validatorMessage="#appLoginParameter['AppLoginEmailIncorrect']}"
Should be:
validatorMessage="#{appLoginParameter['AppLoginEmailIncorrect']}"
Try that and see if that helps.
I a have a JSF page with PrimeFaces with some input fields. Before a submit is done, I would like to use the value of a field as input for a method which does some calculations and updates another field with the result but without submitting the form.
This is the field that will be used as input for my method:
<h:outputLabel for="hiredate" value="#{msgs['addUser.hireDate']}" />
<p:calendar id="hiredate" value="#{userWizardMB.user.hireDate}" required="true" immediate="true"/>
<p:message for="hiredate" />
The calculation is done by clicking a <p:commandButton>:
<p:commandButton value="Calculate days" icon="ui-icon-circle-check" action="#{userWizardMB.calculateVacationDays}" update="vacationDays" process="#this" immediate="true"/>
And this is the method called:
public void calculateVacationDays() {
user.setVacationDays((int) vacationDaysCalculator
.calculateWithHireDate(user.getHireDate()));
}
When debugging, though, I see that this field is NULL even if I set value in the form.
How can I force the setting of this field - user.hireDate because I really need this value for my calculation?
Thank you
Edit: I removed all of the other fields in the form and the immediate attribute:
<h:form id="addUserForm">
<p:wizard widgetVar="wizard" flowListener="#{userWizardMB.onFlowProcess}">
<!-- TAB FOR PERSONAL DATA -->
<p:tab id="personal" title="#{msgs['addUser.personalTab']}">
<p:panel header="#{msgs['addUser.personalInformation']}">
<p:message for="vacationDays" showDetail="true" autoUpdate="true" closable="true"/>
<h:panelGrid columns="3" columnClasses="label, value" styleClass="grid">
<h:outputLabel for="hiredate" value="#{msgs['addUser.hireDate']}" />
<p:calendar id="hiredate" value="#{userWizardMB.user.hireDate}" required="true" />
<p:message for="hiredate" />
<h:outputLabel for="vacationDays" value="#{msgs['addUser.vacationDays']}"/>
<p:inputText id="vacationDays" value="#{userWizardMB.user.vacationDays}"/>
<p:commandButton value="Calculate days" icon="ui-icon-circle-check" action="#{userWizardMB.calculateVacationDays}" process="#this hiredate" update="vacationDays"/>
</h:panelGrid>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
And the backing bean method is still not called.
Remove immediate="true" from the input and the command component. Do not use immediate unless you really understand what it should be used for. Further you also need to include the input component which you'd like to process in the update attribute of the command component. Note that this should represent the client ID, not the property name as mentioned in one of your comments.
<p:calendar id="hiredate" value="#{userWizardMB.user.hireDate}" required="true" />
...
<p:commandButton value="Calculate days" icon="ui-icon-circle-check"
action="#{userWizardMB.calculateVacationDays}"
process="#this hiredate" update="vacationDays" />
See also:
Why was "immediate" attribute added to the EditableValueHolders?
Use process="#form" (or process="[the id of the calendar component]" in the commandButton
process="#this" means that only the part of the model related to the commandButton (usually none) gets updated.
Old question, but did you add partialSubmit="true" in the commandButton tag? At least in PrimeFaces 3.5, false is the default value of this attribute (see the PrimeFaces PDF documentation).
I tried different combinations to just rerender the result pannel.
it works fine with
<h:form><a4j:region>
<h:inputText value="#{myBean.keyword}">
<a4j:support event="onchange" reRender="results" eventsQueue="search" oncomplete="initResults();" />
</h:inputText>
</a4j:region>
</h:form>
But i just want to submit it when enter is pressed. So i tried
<h:form reRender="results" eventsQueue="search" oncomplete="initResults();"><a4j:region>
<h:inputText value="#{myBean.keyword}"/>
</a4j:region>
</h:form>
that returned an empty result even if it shouldn't be empty and
<a4j:region>
<h:form>
<a4j:support event="onsubmit" reRender="results" eventsQueue="search" oncomplete="initResults();" />
<h:inputText value="#{myBean.keyword}"/>
</h:form>
</a4j:region>
was reloading the whole page and not the result panel only (but results where shown). I even tried to add <h:form onSubmit="return false;"> in the last example. [EDIT: ok that return false is just overwritten by the AJAX support call]
How do i make my inputText field rerender when "enter" is pressed. (so the form is submitted) but don't want to submit the form.
EDIT: again my bad, i simplified the example code here too much. i had a second element with a4j:support in the same form, since i removed the a4j tag there and changed the onchange event to a form submit, too, it is working.
<h:selectOneMenu value="#{myBean.selectedMetaCategory}" onchange="this.form.submit();">
<a4j:support ...
<f:selectItems value="#{myBean.metaSelectItems}"/>
</h:selectOneMenu>
Try like this:
<a4j:region>
<a4j:form onsubmit="reRenderResults();">
<h:inputText value="#{myBean.keyword}"/>
</a4j:form>
<a4j:jsFunction name="reRenderResults" reRender="results" eventsQueue="search" oncomplete="initResults();" />
</a4j:region>