I have a simple code, using primefaces autocomplete in my jsf java project. My method works but autocomplete shows no dropdown.
Can anyone help me with this problem?
Thank you
<div class="az-quick-search">
<p:outputLabel value="Quick search:" for="specialistQuickSearch" />
<p:autoComplete id="specialistQuickSearch" value="#{specialists.selectedSurgeon}"
completeMethod="#{specialists.autoCompleteSurgeon}" var="surgeonAuto"
itemLabel="#{surgeonAuto.surgeonLastNm}#{surgeonAuto.surgeonFirstNm}" itemValue="#{surgeonAuto}" forceSelection="true"
converter="specialistConverter"
placeholder="Enter a specialist name"
onkeydown="if (event.keyCode === 13) { return false; }">
<p:ajax event="itemSelect" onstart="PF('statusDialog').show();" listener="#{specialists.goToSpecialist()}"/>
</p:autoComplete>
</div>
I traced the code, no bug in backend. I removed deferent attributes and ajax part too. but no change
Related
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.
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 have a custom tag called "fieldWrapper" to bind labels with their respective inputs and provide validation messages.
The code of the component:
<h:panelGroup id="#{for}CompleteFieldContainer"
styleClass="completeFieldContainer"
layout="block"
rendered="#{rendered}">
<h:panelGroup id="#{for}FieldWithLabelContainer" layout="block"
styleClass="fieldWithLabelContainer #{fieldWrapperBean.getRequiredClass(required)} #{totalSizeClass}">
<c:if test="#{!empty check and check}">
<div class="labelContainer #{labelSizeClass} checkInput">
<ui:insert />
</div>
<div class="labelContainer #{for}LabelContainer checkStyle">
<h:outputLabel for="#{for}" value="#{label}" title="#{title}"/>
</div>
</c:if>
<c:if test="#{empty check or not check}">
<div class="labelContainer #{labelSizeClass} #{for}LabelContainer #{checkStyle}">
<h:outputLabel for="#{for}" value="#{label}" title="#{title}"/>
</div>
<ui:insert />
</c:if>
</h:panelGroup>
<h:panelGroup rendered="#{renderError}" layout="block" styleClass="messageContainer">
<p:message for="#{for}" id="#{for}Message" rendered="true"/>
</h:panelGroup>
</h:panelGroup>
One example of this tag is the following:
<gitags:fieldWrapper for="codeInput"
label="#{msg.code}"
labelSizeClass="size75"
totalSizeClass="size175"
required="false">
<p:inputText id="codeInput"
value="#{clienteFinderManager.codigo}"
styleClass="inputText size100"/>
</gitags:fieldWrapper>
It automatically adds a message for that input, that is rendered when bean validation triggers.
It's working perfectly inside all components except p:tabView.
When I use it inside a tabView messages are queued but not written, but, if i add manually messages after the component they are written:
<gitags:fieldWrapper for="codeInput"
label="#{msg.code}"
labelSizeClass="size75"
totalSizeClass="size175"
required="false">
<p:inputText id="codeInput"
value="#{clienteFinderManager.codigo}"
styleClass="inputText size100"/>
<p:message for="codeInput" id="codeInputMessage" rendered="true"/>
</gitags:fieldWrapper>
Bean Validation Inside Tabs
Any idea of why is this happening?
It was a bug: https://code.google.com/p/primefaces/issues/detail?id=5238
Fixed in primefaces 5.0.
I have a fix in any primeface version.
You need to take <p:outputLabel> instead of <p:message>.
Take one string variable message and set error message in to that . Keep <p:ajax> inside<p: tabView> on tabChange event call the action method from bean and empty the error message. Because we need every time while changing the tab the error message should clear. After click on the submit button then only the error message will show.
If any clarification contact me.
I have a contact form at the bottom of a page with required and validated form fields. If validation fails, how can I get the scroll position back to the bottom of the page?
I want this page to work with Javascript disabled, so no AJAX solutions. I have something like this:
<a id="contact"></a>
<h:form id="cform">
<h5>Contact!</h5>
<h:outputLabel for="name">Name:
<h:message id="nameMsg" for="name" />
</h:outputLabel>
<h:inputText id="name" value="#{bean.name}" required="true" requiredMessage="Please enter name!" />
<h:outputLabel for="email">Email:
<h:message id="emailMsg" for="email" />
</h:outputLabel>
<h:inputText id="email" value="#{bean.email}" required="true" requiredMessage="Email is required!">
<f:validator validatorId="myValidator" />
</h:inputText>
<h:outputLabel for="comment">Comment:
<h:message id="commentMsg" for="comment" />
</h:outputLabel>
<h:inputTextarea id="comment" value="#{bean.comment}" required="true" requiredMessage="Please enter a comment!"/>
<h:commandButton action="#{bean.go}" id="send" value="send" />
</h:form>
I thought about doing validations on the bean side and doing manual redirects to the appropriate anchor, but that seems to defeat the purpose of using JSF to begin with. I assume there is an easy way to do this, but I'm having trouble Googling a solution because I'm probably not wording the question right. Any one?
You can use <f:event type="postValidate"> to have a listener hook right after the validations phase. You can use FacesContext#isValidationFailed() to check if validation has failed or not. You can use Flash#setKeepMessages() to let the faces messages survive a redirect (they're namely by default request scoped!). You can use ExternalContext#redirect() to perform a redirect in a non-action method.
So, summarized, this should do:
<h:form id="cform">
...
<f:event type="postValidate" listener="#{bean.postValidate}" />
</h:form>
with:
public void postValidate() throws IOException {
FacesContext context = FacesContext.getCurrentInstance();
if (context.isValidationFailed()) {
context.getExternalContext().getFlash().setKeepMessages(true);
context.getExternalContext().redirect("contact.xhtml#cform");
}
}
Or we can use f:ajax onerror= for do something if they are an errors :
<p:commandButton **>
<f:ajax onerror="window.scrollTo(0, 0);" />
</p:commandButton>
You don't need an explicit anchor tag for this, the id of the form will do.
You could make Faces render the id at the end of the form action Url.
Eg.
... Your main page content goes here ....
<form id="contact-form" action="/MyView.jsf#contact-form" method="post">
This will cause the browser to scroll to the form after it is submitted.
It shows in the Url too.
You could probably implement a custom Form renderer to do this.
So my team has a jsf and we use an EL statement to read in the value of an input box, works fine but by default we have our value set as what should be filled into the field. How can I set a default value for the input while still having the EL statement work.
Example:
<h:inputText value="#{registrationBean.firstName}" styleClass="formEle"/>
I tried
<h:inputText value="#{registrationBean.firstName}First Name" styleClass="formEle"/>
but this breaks the connection when we submit.
Any ideas?
You're looking for something which is called a "watermark" or "placeholder". At low level, these days this is normally to be done by the HTML5 placeholder attribute:
<input type="text" placeholder="First Name" />
This works of course only in browsers supporting HTML5 and then only with JSF components supporting the new HTML5 attribute. The standard JSF <h:inputText> doesn't support this natively (yet). You'd need to look for 3rd party component libraries supporting this. Among them is PrimeFaces with its <p:watermark>:
<h:inputText id="firstName" value="#{registrationBean.firstName}" />
<p:watermark for="firstName" value="First Name" />
If using PrimeFaces is not an option for some reason, you'd need to reinvent it yourself in flavor of a custom component and/or a custom piece of JS/jQuery, exactly like <p:watermark> is doing under the covers.
You could define default value of <h:inputText> in your backing bean in PostConstrut phase.
#ManagedBean(name="registrationBean")
public class RegistrationBean{
private String firstName;
#PostConstruct
public void init(){
firstName = "your default value";
}
}
After page creation value displayed in h:inputText will be as you defined in backing bean.
It's kind of work around without any third party library maybe it will help someone.
The HTML-Tags rendered by JSF can be modified by JavaScript after loading inserting a placeholder attibute for HTML5:
<script>
window.onload = function() {
document.getElementById('email').setAttribute("placeholder", "Email");
document.getElementById('pwd').setAttribute("placeholder", "Password");
}
</script>
If you decide to use PrimeFaces you are not required to use a watermark, see example below:
<h:form>
<p:panel id="panel" header="Client Details" style="margin-bottom:10px;">
<p:messages id="messages" />
<h:panelGrid columns="2">
<h:outputLabel for="firstName" value="First Name" />
<p:inputText id="firstName" value="#{clientlistpagebean.selectedFieldClient.firstName}" required="true" />
<p:outputLabel for="lastName" value="Last Name" />
<p:inputText id="lastName" value="#{clientlistpagebean.selectedFieldClient.lastName}" required="true" />
</h:panelGrid>
</p:panel>
<p:commandButton value="Submit" update="panel" style="margin-right:20px;" />
</h:form>