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.
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
DropDown Box code:
<p:selectOneMenu id="user" value="#{daywise_Count.selectuserId}" style="width:120px">
<f:selectItem itemLabel="All" itemValue="0" />
<f:selectItems value="#{daywise_Count.getAllLoginIds()}" var="uif" itemLabel="#{uif.loginId}" itemValue="#{uif.userId} " />
</p:selectOneMenu>
CheckBox code:
<p:selectBooleanCheckbox id="checkbox" value="#{deptBean.checkboxvalue}" /> With All Details
reset function:
function resetter()
{
document.getElementById('myForm:myMenu_label').innerHTML = 'All';
}
Calling Reset Function
<h:commandButton id="btnReset" value="Reset" update="myForm" onclick="resetter();"
styleClass="button" type="submit">
</h:commandButton>
I am using reset button in myForm that functionality is not working properly in primefaces.please suggest any solution...
you should try this <p:commandButton id="btnReset" value="Reset" update="myForm" process="#this" /> this is working for me, I hope it will help you too. and no need to java script.
update="myForm" attribute means it will update your panel because here you will use panel id and process="#this" means it will execute same content after click on reset button for further details you can search on google or refer this link What is the function of #this exactly?
I have a primefaces input text area and a primefaces button. I want the button to be enabled only when there is any value entered in the text area.
<p:inputTextarea id="dumpnotes" rows="10" cols="90" value="#{postProcessedDump.keyedinContent}" style="color: #000000" styleClass="inputarea" />
<p:commandButton value="Save" actionListener="#{dumpController.saveDumpNotesContent}" update="dumpnotes" oncomplete="PF('dumpNotesSaveSuccessDialog').show();"/>
<p:inputTextarea id="dumpnotes" rows="10" cols="90" value="#{postProcessedDump.keyedinContent}" style="color: #000000" styleClass="inputarea">
<p:ajax event="keyup" update="saveButton" />
</p:inputTextarea>
<p:commandButton id="saveButton" value="Save" actionListener="#{dumpController.saveDumpNotesContent}" update="dumpnotes" oncomplete="PF('dumpNotesSaveSuccessDialog').show();" disabled="#{empty postProcessedDump.keyedinContent}" />
Edit (based on your comment):
Try to add global="false" to not trigger ajaxStatus <p:ajax event="keyup" global="false" update="saveButton" />. Depending on your PrimeFaces version, you may need to strip out the event name and only write <p:ajax global="false" update="saveButton" />
The questions seems to be rather JavaScript related so I would try the following approach.
First I would define a JavaScript function which checks whether to enable the commandButton or not:
function validateInput() {
if(document.getElementById('dumpnotes').value == '') {
document.getElementById('button').disabled = true;
} else {
document.getElementById('button').disabled = false;
}
}
So you just have to give commandButton a id (e.g. id="button") and use onkeyup event at inputTextarea like this:
<p:inputTextarea id="dumpnotes" onkeyup="validateInput()" ... />
I hope this is what you were looking for.
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.
I need to save values on Focus out in Inplace JSF. Currently the editor tag can be used but it will display a save/cancel button.
My requirement is to save the data on focus out.
This is the Inplace tag that i am using.
<p:inplace id="basic">
<p:inputText value="Edit Me" />
</p:inplace>
Is there any ajax event like.
<p:ajax event="Something like focusOut" listener="#{bean.myFunction()}"/>
My Code sample when i use Blur as ajax event
<p:inplace label="#{serviceCalendarViewManagedBean.selectedService.statusStr}" id="ajaxInplaceStatusEdit" >
<p:ajax event="blur" listener="#{serviceCalendarViewManagedBean.inplaceEdit('StatusEdit')}" update="view" oncomplete="scheduleWidget.update();"/>
<p:selectOneMenu id="statusEditImplace" required="true"
value="#{serviceCalendarViewManagedBean.selectedService.status}"
label="text">
<f:selectItems value="#{serviceCalendarViewManagedBean.serviceStatusList}"
var="status" itemLabel="#{status.title}" itemValue="#{status.id}" />
</p:selectOneMenu>
</p:inplace>
The error message That i get when using this event
/WEB-INF/views/service/servicecalendarview.xhtml #886,153 <p:ajax>
Event:blur is not supported.
You're looking for the onblur event:
Execute a JavaScript when a user leaves an input field:
JSF code:
<p:ajax event="blur" listener="#{bean.myFunction()}"/>
EDIT: from your posted code, the <p:ajax> affects the <p:inplace> where it should affect the <p:selectOneMenu>. Move the <p:ajax> inside the <p:selectOneMenu>:
<p:inplace label="#{serviceCalendarViewManagedBean.selectedService.statusStr}"
id="ajaxInplaceStatusEdit" >
<p:selectOneMenu id="statusEditImplace" required="true"
value="#{serviceCalendarViewManagedBean.selectedService.status}"
label="text">
<f:selectItems value="#{serviceCalendarViewManagedBean.serviceStatusList}"
var="status" itemLabel="#{status.title}" itemValue="#{status.id}" />
<p:ajax event="blur" listener="#{serviceCalendarViewManagedBean.inplaceEdit('StatusEdit')}"
update="view" oncomplete="scheduleWidget.update();"/>
</p:selectOneMenu>
</p:inplace>