I have a requirement where I need to display the header and footer based upon the value in the URL parameters. Everything works fine. But the URL params are lost after JSF validations. This happens only when I click submit. Works fine for the ajax validations.
<h:panelGrid columns="1" id="lnamePanel">
<h:inputText tabindex="1" maxlength="50" id="lastName" value="#{registrationBean.last_name}" required="true" requiredMessage="Last Name is a required field" validatorMessage="Not a valid last name">
<f:validateRegex pattern="^[A-Za-z-_.\s]{2,50}$"/>
<f:ajax event="blur" render="lnamePanel" />
</h:inputText>
<h:message for="lastName" display="text" style="color:red;"/>
</h:panelGrid>
<h:commandButton value="Submit" actionListener="#{registrationBean.handleSubmit}" ajax="true"/>
How do I retain the url parameters after JSF validation? In this case, I cannot manipulate the URL inside the backing bean as the backing bean method is not getting called.
Any help would be appreciated.
Related
I am new to JSF and doing some sample login application. I need username,password only with tooltips.
I have added below extra jsf element rich:toolTip element added as below and my question is, how to hide this extra element.
I want to hide this element without removing from jsp.
When I inspected the source code from browser, UI is getting broken and added some extra space.
sample.jsp
<h:panelGrid>
<h:outputText value="username"/>
<h:inputText value="username">
<rich:toolTip value="enter uname" event="onmouseover"
direction="bottom-right" layout="block"/>
</h:inputText>
<h:outputText value="password"/>
<h:inputText value="password">
<rich:toolTip value="enter password" event="onmouseover"
direction="bottom-right" layout="block"/>
</h:inputText>
<rich:toolTip value="how to hide this element" event="onmouseover"
direction="bottom-right" layout="block"/>
</h:panelGrid>
Could anyone help on this?
I have added immediate="true" in button
<h:commandButton id="browse" action="#{creationBean.getATerminationRoot()}" value="Browse" immediate="true">
<rich:componentControl event="click" target="aTermPanel" operation="show" /></h:commandButton>
Now in same page i have included another page like below
<ui:insert name="name">
<ui:include src="../pages/abc.xhtml" />
</ui:insert>
This page have some validation in inputtextbox
<h:inputText id="ammOnDemandId" required="true"
value="#{var.amount}"
requiredMessage="Msg1"
validatorMessage="msg2">
<f:validateRequired />
<f:validateLongRange minimum="0" maximum="9999999">
</f:validateLongRange>
<rich:validator event="blur" />
</h:inputText>
Note:- This included page have another <h:form>
If i am removing these validation everything working fine in parent page and clicking on button data is loaded but when i am adding validation in this included page textbox button not working due to validation fail.
As far as i understand your h:commandButton trigger two things :
-> an http request which expecting a refresh or redirect of the page
-> an non-http action which shows up a new panel in the current page
Maybe jsf don't know how to deal with this contradiction.
Does it makes sense to merge these several hidden forms on a single page into just one single big form?
To submit a particular set of parameters belonging to a particular form process attribute could be used to submit all elements required to be processed.
What are the pro/cons of this single form approach over using several forms?
<span class="hiddenForms">
<h:form>
<h:inputHidden id="selctdChnlType_in" value="#{channelCntlr.type}"/>
<h:inputHidden id="selctdChnlId_in" value="#{channelCntlr.channelId}"/>
<p:remoteCommand name="updateChnlDataPanel" process="#form" actionListener="#{channelCntlr.init()}" update=":channelHeader, :channelDataPanel, :channelSideColumn"/>
</h:form>
<h:form>
<h:inputHidden id="selctdLOBId_in" value="#{lobCntlr.targetLOBId}"/>
<p:remoteCommand name="updateLOBPanel" process="selctdLOBId_in, #this" actionListener="#{lobCntlr.retrieveCurrentLOB()}" update=":lobFullContentPanel" />
</h:form>
<h:form id="lobAction_form" >
<h:inputText id="targetLOBId_in" value="#{lobCntlr.targetLOBId}"/>
<h:inputText id="targetResponseId_in" value="#{lobCntlr.targetResponseOrCommmentId}"/>
<h:inputText id="targetAction_in" value="#{lobCntlr.targetAction}"/>
<p:remoteCommand name="doLOBAction" process="targetLOBId_in, targetAction_in, targetResponseId_in,#this" actionListener="#{lobCntlr.doLOBAction()}"/>
<h:inputText id="targetTopics" value="#{lobCntlr.list}" converter="listConverter"/>
<p:remoteCommand name="suggestAsHotLOB" process="targetLOBId_in, targetTopics, #this" actionListener="#{lobCntlr.addForTryAsHotLOB()}"/>
</h:form>
<h:form id="comment_form" >
<h:inputText id="targetLOBId_in" value="#{lobCntlr.targetLOBId}"/>
<h:inputText id="targetCommentOrResponseId_in" value="#{lobCntlr.targetResponseOrCommmentId}"/>
<h:inputText id="comment_in" value="#{lobCntlr.text_input}" required="true">
<f:validateLength minimum="15" maximum="1000"/>
</h:inputText>
<h:inputText id="previousCommenters_in" value="#{lobCntlr.list}" converter="listConverter"/>
<p:remoteCommand name="addComment" process="#form" actionListener="#{lobCntlr.addUserComment()}" oncomplete="addCommentToPage(args);" />
<p:remoteCommand name="deleteComment" process="targetLOBId_in, targetCommentOrResponseId_in, #this" actionListener="#{lobCntlr.removeUserComment()}" oncomplete="removeFromPage(args);" />
</h:form>
<h:form id="recosForm">
<h:inputText id="startFromRecos_in" value="#{recmdnsCntlr.startFromIndex}"/>
<p:remoteCommand name="fetchAllRecos" actionListener="#{recmdnsCntlr.retrieveAllRecmmndns()}" process="startFromRecos_in,howManyRecos_in,isLocalStorAvailble_in,#this" />
<p:remoteCommand name="fetchFollowiesList" actionListener="#{recmdnsCntlr.fetchAllFollowiesList()}" process="#this" oncomplete="storeFollowiesList(args)"/>
</h:form>
<span id="editsForm" style="display:none">
<form action="javascript:void(0);" class="edits_submitter" >
<p:inputTextarea styleClass="editedText"/>
<input type="submit" value="Save edits"/>
<a class="cancel-edit" href="javascript:void(0)">Cancel</a>
</form>
</span>
</span>
A major con to the single, monolithic JSF form control is the sheer volume of data that is (needlessly) sent to the server for processing. Using your existing code. Consider the following. If all the controls in <h:form id="lobAction_form" > and <h:form id="comment_form" > were in a single form, you'd have
<h:inputText id="targetLOBId_in" value="#{lobCntlr.targetLOBId}"/>
<h:inputText id="targetResponseId_in" value="#{lobCntlr.targetResponseOrCommmentId}"/>
<h:inputText id="targetAction_in" value="#{lobCntlr.targetAction}"/>
<p:remoteCommand name="doLOBAction" process="targetLOBId_in, targetAction_in, targetResponseId_in,#this" actionListener="#{lobCntlr.doLOBAction()}"/>
<h:inputText id="targetTopics" value="#{lobCntlr.list}" converter="listConverter"/>
<p:remoteCommand name="suggestAsHotLOB" process="targetLOBId_in, targetTopics, #this" actionListener="#{lobCntlr.addForTryAsHotLOB()}"/>
<h:inputText id="targetLOBId_in" value="#{lobCntlr.targetLOBId}"/>
<h:inputText id="targetCommentOrResponseId_in" value="#{lobCntlr.targetResponseOrCommmentId}"/>
<h:inputText id="comment_in" value="#{lobCntlr.text_input}" required="true">
<f:validateLength minimum="15" maximum="1000"/>
</h:inputText>
<h:inputText id="previousCommenters_in" value="#{lobCntlr.list}" converter="listConverter"/>
<p:remoteCommand name="addComment" process="#form" actionListener="#{lobCntlr.addUserComment()}" oncomplete="addCommentToPage(args);" />
<p:remoteCommand name="deleteComment" process="targetLOBId_in, targetCommentOrResponseId_in, #this" actionListener="#{lobCntlr.removeUserComment()}" oncomplete="removeFromPage(args);" />
</h:form>
For every command action that you initiate in that form, possibly to process 1 input text component, you'd always be sending all 13 components in there to the server anyway. Wasteful and unnecessary. You'll have high volume of client-server communications for small operations and sometimes slow response times. Depending on whatever JSF framework you're using, you might be able to get creative with this situation, selectively processing components and what not, but that is just needless and painful. Clean separation of concerns also comes into play in the presentation layer.
Then there is the problem of validation. More often than not, you will have selected components in a single form that are marked as required and have nothing to do with the rest of the components within that form. You'll most likely be unable to selectively process those components without affecting all the other components on that form.
I see you're using primefaces. You could consider the use of Wizard component. With this component there is a single form with more sections in different tabs. The validation is done in Ajax mode when you go from one tab to the next one. As the partial validation is done with Ajax, only the fields of the tab you are validating, are processed and sent to the server.
It is also useful to split long forms in more readable and user friendly sections.
I have developed a simple login form to be used in my JSF + PrimeFaces page:
<form action="j_security_check" method="post">
<p:dialog modal="true" header="Login" widgetVar="loginDlg">
<h:panelGrid columns="3" cellpadding="5">
<h:outputLabel for="j_username">Username:</h:outputLabel>
<h:inputText id="j_username" required="true" />
<h:message for="j_username" />
<h:outputLabel for="j_password">Password:</h:outputLabel>
<h:inputSecret id="j_password" required="true" />
<h:message for="j_password" />
<br />
<h:commandButton value="Login" />
</h:panelGrid>
</p:dialog>
</form>
Tried with an empty password, but the missing password (that is required) is not caught by h:message component. I have also switched to a p:commandButton thinking that the problem could have been in the Ajax behaviour of the button, but the page is not rendered because PrimeFaces complains about the CommandButton not being inside a form element. The exception thrown by the container is:
com.sun.enterprise.security.auth.login.common.LoginException: Login failed: Access denied on empty password for user pippo
To summarize, I have 2 questions:
Why the missing password doesn't produce a message before the form is submitted?
How can I catch a LoginException and display the error message inside the dialog?
The j_security_check request is handled by the web container, not by JSF. That explains that the required="true" won't work. It works only when you use JSF <h:form> and programmatic login by HttpServletRequest#login() in the action method associated with the command button.
Best what you can do is to confiure a <form-error-page> in web.xml pointing to the very same URL as the <form-login-page>. You could then check if the request has been forwarded by j_security_check itself, which would mean that a login error has occurred.
<h:panelGroup rendered="#{requestScope['javax.servlet.forward.servlet_path'] == '/j_security_check'}">
<h:outputText value="Unknown login, please try again" styleClass="error" />
</h:panelGroup>
Use this instead of the <h:message>.
As to why <p:commandButton> complains that there's no form is simply because you didn't use <h:form>.
Unrelated to the concrete problem, that <form> (or <h:form> whenever you would decide to switch to programmatic login) can better be placed in the body of <p:dialog>, not outside. The <p:dialog> can by JS be relocated to end of body which would cause it not to be in a form anymore.
I have a form that needs to be submitted with ajax. I am trying to get the validation to work but it wont work when I use ajax. When I take the ajax out and submit the form with an empty testinput it properly triggers he validation and does not submit the form. How can I do this with an ajax call. My form is below.
<h:form>
<f:ajax>
<h:panelGrid columns="3">
<h:outputLable for=test" value="testinput:" />
<h:inputText id=test" required="true" label="testinput" />
<h:message for="test" id="testError"/>
</h:panelGrid>
<h:commandButton value="Submit" actionListener="#{testBean.doSomething}" />
</f:ajax>
</h:form>
The <f:ajax> by default doesn't re-render the form, so you won't see anything. Replace <f:ajax> by <f:ajax execute="#form" render="#form" />.
Maybe try something like this:
<h:form id="yourFormId">
<!-- form content -->
<h:commandButton value="Submit">
<f:ajax execute="yourFormId" listener="#{testBean.doSomething}"/>
</h:commandButton>
</h:form>