This question already has answers here:
How to let validation depend on the pressed button?
(4 answers)
Closed 7 years ago.
I'm trying to do something similar to this:
<h:form id="form">
<p:inputText id="input1" value="#{mb.input}" required="true" /><br />
<h:panelGroup id="panelGroup"><br />
<p:inputText id="input2" required="true" /><br />
<p:commandButton id="doSomething" value="something" action="#{mb.doSomething}" />
</h:panelGroup><br />
<p:commandButton id="save" value="Save" action="#{mb.save}" /><br />
</h:form>
Here is my problem: when I hit the save button I want the whole form to be validated where required="true" (for both input1 and input2, which works fine).
BUT, when I hit the doSomething button I would like it to check only if input2 is filled, ignoring the condition of input1 (in other words: it shouldn't work if input2 is empty but should work even if input1 is). Is there a way to do it? (And I can't use Managed Beans for that!)
use the process attribute of the <p:commandButton> like this
<p:commandButton id="doSomething" value="something" action="#{mb.doSomething}" process="input2"/>
that way it will only validate input2 upon click. as per Primefaces Documentation:
process | null | String | Component(s) to process partially instead of
whole view.
Only put immediate="true" attribute to both components inside the panel. Or you also can use Ajax for the button inside the panel for sending only the panel content.
Note 1: The input inside the panel is claiming for a value attribute.
Note 2: Also include an update attribute to both buttons. ie:
update="#form"
Note 3: Also you can include the <p:messages/> element inside the form.
Related
I want to pass data to back bean through ajax call on command button click.
I have a form with couple of input text fields where each field is having ajax blur event.
Every thing is working fine in happy flow except in the flowing scenario.
Ajax blur event is invoking when i directly clicking on submit which is suppose to be happen before submit click, hence i should make another click on submit button to invoke ajax call to save my form.
Here is the code.
Input text fields:
<p:inputText id="txt_name"
value="#{partnerVO.partnerName}"
required="true" maxlength="30"
rendered="#{!partnerVO.isReadOnly}">
<p:keyFilter regEx="/[A-Za-z0-9#.,&- ]/i"
for="txt_name" preventPaste="false" />
<p:ajax update="txt_name" event="blur" />
</p:inputText>
<p:inputText id="txt_assigned"
value="#{partnerVO.assignedName}"
required="true" maxlength="30"
rendered="#{!partnerVO.isReadOnly}">
<p:keyFilter regEx="/[A-Za-z0-9#.,&- ]/i"
for="txt_assigned" preventPaste="false" />
<p:ajax update="txt_assigned" event="blur" />
</p:inputText>
Command Button:
<p:commandButton id="btn_save"
title="Save"
value="#{lbl['tpdetails.remove.additional.address']}"
update="#form" process="#this"
action="#{partnerDetailsController.save}">
</p:commandButton>
I'm using JSF 2.2
Please provide some suggestions to overcome this strange behavior.
Note: omitted form related code here.
I'm trying to create a comment page with a variable set of comments (layed out via o:tree, thanks BalusC) that anyone can reply to. I'm displaying the h:inputTextArea via p:inplace, so there are multiple textinputareas per page with multiple commandbutton replies. I'm trying to map the command button to a single back-end variable from a specific textinputarea so that every textinputarea isn't processed each time the command button is pressed.
Edit: Code example
<o:tree value="#{xPost.post.comments.treeModel}" var="comment" varNode="node">
<o:treeNode>
<o:treeNodeItem>
<p:panel>
<h:outputText value="#{comment.commentText}" />
<p:inplace label="Reply">
<br/>
<p:editor value="#{post.newComment}" />
<p:commandButton action="#{post.saveComment('#{comment.ID'})}" value="Comment" ajax="false" />
</p:inplace>
<o:treeInsertChildren />
</p:panel>
</o:treeNodeItem>
</o:treeNode>
</o:tree>
To add to this, I'm using hibernate validation, which to my knowledge can only validate via annotations:
#NotBlank(message="Please enter a comment.")
#Length(min=1, max=10000, message="A comment must be between 1 and 10,000 characters.")
#SafeHtml(message="Invalid Rich Text.")
private String newComment = "";
So from the code above, when I have 2+ p:editor, each editor is being processed and populating the same back-bean variable. How do I force a commentButton to only validate a specific inputBox/p:editor and set the backing-bean variable.
Thank you for your help.
Just give each editor its own form. In other words, move the <h:form> from outside the <o:tree> to inside the <o:treeNodeItem>. This will ultimately render multiple forms with each its own editor and button.
You need to provide your source details for people to give you more help
In your case, I'm guessing the following should do the trick:
<ui:repeat var="comment" ...> // or equivalent like o:tree
<h:inputText value="#{comment.message} .../>
<h:commandButton actionListener="#{bean.updateMessage}">
<f:setPropertyActionListener from="#{comment}" to="#{bean.commentBeingProcessed}"/>
<!-- Or alternatively, you can set the comment object on to the command button
and receive it on the server side as event.getComponent().getAttribute("comment")
<f:attribute name="comment" value="#{comment}"/>
-->
</h:commandButton>
</ui:repeat>
Hope that helps.
This question already has an answer here:
How to skip validation when a specific button is clicked?
(1 answer)
Closed 7 years ago.
In a form, I have some inputText with two commandButton, one to accept and one to cancel.
How can I disable validation for the cancel button only?
<h:form id="detailsForm">
<p:inputText id="editUsername" value="#{userController.editUser.usrUsername}" />
<p:inputText id="editFirstName" value="#{userController.editUser.usrFirstName}" />
<p:inputText id="editLastName" value="#{userController.editUser.usrLastName}" />
<p:commandButton value="Accept" update=":detailsForm" actionListener="#{userController.onDetailsEditAccept}" />
<p:commandButton value="Cancel" update=":detailsForm" actionListener="#{userController.onDetailsEditCancel}" />
</h:form>
I already tried inserting required="false" on fields but it didn't work.
I also tried inserting <f:validateBean disabled="true" /> on fields and it didn't work.
Use the attribute immediate="true" in your cancel commandButton. This will skip the entire processing of the form, tough, by skipping the Apply Request Values, Process Validations and Update Model Values phases.
<p:commandButton value="Cancel" update=":detailsForm" actionListener="#{userController.onDetailsEditCancel}" immediate="true"/>
Use the attribute process="#this" in the Cancel button. This will prevent the whole form being submitted.
Or you can use p:button instead (however this doesn't have the actionListener attribute). See this other Q/A
if You don't want to submit the form. You should use just the <p:button>. the <p:commandButton> submits the form.
<p:button value="delete All"
action="#{reloadBean.purge}" update="#form"/>
This question already has an answer here:
Ajax update/render does not work on a component which has rendered attribute
(1 answer)
Closed 6 years ago.
I have a component that I want to show/hide after user hits a commandButton.
It's like this:
<h:commandButton id="showButton" value="#{bean.wasPressed ? 'Hide' : 'Show'}">
<f:ajax listener="#{bean.toggle()}" render="explanation showButton" />
</h:commandButton>
and
<h:panelGroup id="explanation" rendered="#{bean.wasPressed}">
<h:outputText value="something" />
</h:panelGroup>
The bean.toggle() simply sets the wasPressed property to true or false appropriately. I am using <h:form prependId="false">.
The problem is the value of the render attribute of my button. It explicitly enlists both: explanation and showButton.
As long as the showButton is always present (it only changes its label), the explanation is present only if the wasPressed property is true. Otherwise it says:
malformedXML: During update: explanaition not found
How can I solve this problem?
I would like not to revert to hiding the element in the source code, so I would like not to use any jQuery toggle(-) or any way of hiding the element using style="display: none" or any of this stuff.
Is it even achievable in JSF 2.1?
You cannot update elements which are not rendered , rendered=false "is a JSF way to" to remove elements from the DOM Tree ,
its not like css display:none or visibility:hidden <- this two will keep the elements in the DOM tree but hidden , while the JSF rendered=false wont even render (keep) the element in the DOM tree (you wont even see it in the "view source" of the page)
So in you case you need to wrap the panelGroup with another `panelGroup' and update the id of the wrapper
<h:commandButton id="showButton" value="#{bean.wasPressed ? 'Hide' : 'Show'}">
<f:ajax listener="#{bean.toggle()}" render="explanationWrapper showButton" />
</h:commandButton>
<h:panelGroup id="explanationWrapper">
<h:panelGroup id="explanation" rendered="#{bean.wasPressed}">
<h:outputText value="something" />
</h:panelGroup>
</h:panelGroup>
also look at similar question
Can you update an h:outputLabel from a p:ajax listener?
I have the following piece of code inside a form:
<p:panel id="panel" header="lalalala">
<h:panelGrid columns="5">
<h:outputLabel value="Enter name" for="name" />
<p:inputText id="name" value="#{userBean.name}"
required="true" label="name" maxlength="15"
validatorMessage="oops"
requiredMessage="ooopps">
<f:validateRegex
pattern="^somepattern$">
</f:validateRegex>
<p:ajax event="blur" update="inputValidationMessage" />
</p:inputText>
<p:message id="inputValidationMessage" showSummary="false"
for="name" />
<p:watermark for="name" value="eg. John" />
</h:panelGrid>
<p:commandButton id="submitButton" value="Submit" update="panel"
actionListener="#{userBean.save}"
onclick="handleOnclick"
oncomplete="handleAjaxResponse(xhr, status, args)">
</p:commandButton>
<p:messages autoUpdate="true" globalOnly="true" showDetail="true" />
</p:panel>
So the validation messages work well on the inputText element. But the submit button is still making an Ajax request when clicked, even though the input is invalid. I want the Ajax request to be sent iff the inputText is valid.
How do I do that?
Furthermore; there is another case I'd like to deactivate the button. This is the case where inputText is validated and the user clicks the button. The reason for this one is, I don't want the user to mistakenly flood requests. (i.e repeatedly press the submit button)
Currently, the handleOnclick javascript function only shows a modal dialog box saying "wait". Since that dialog is modal, the background is inaccessible. However, that still doesn't prevent the user from pressing it repeatedly because 1 second passes between onclick and modal dialog showing. Furthermore; this approach doesn't prevent submitting invalid data. What can you suggest?
I use JSF2.0 and Primefaces 3.0.
Any help appreciated.
You can use the button's disabled attribute for it. Just set it to true whenever FacesContext#isPostback() returns false (so, it's an initial request), or when it's true (so, a form submit has occurred), then check if FacesContext#isValidationFailed() returns true (so the validation has failed in general).
<p:commandButton ... disabled="#{not facesContext.postback or facesContext.validationFailed}" />
You only need to ensure that you update the button on ajax requests as well, so that it will reappear either enabled or disabled when necessary.
<p:ajax event="blur" update="inputValidationMessage submitButton" />