Messages not working inside Primefaces TabView - jsf

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.

Related

p:command to submit a form in overlaypanel

I am trying to put a p:commandButton inside a overlayPanel, to submit the information of a h:form and redirect to another view. So, I use the property action of the button to perform this operation. I have a managed bean associated with this view but the function used for this purpose is never reached. Can u help me?
Here is the code:
advancedSearch-form.xhtml
<h:form>
<h:panelGrid width="100%">
<h:column>
....
</h:column>
....
<p:commandButton value="Submit" action="#{searchForm.save}">
</p:commandButton>
</h:panelGrid>
In another xhtml:
<h:form>
<div>
...
<div class="menu-search">
<p:commandButton id="advancedSearch" icon="ui-icon-carat-1-s" styleClass="ui-search-button" type="button"/>
<p:overlayPanel id="advancedSearchPanel" styleClass="ui-advanced-search-overlay" for="advancedSearch" hideEffect="fade" my="right top" dynamic="true" dismissable="false">
<ui:include src="/search/advancedSearch-form.xhtml"/>
</p:overlayPanel>
</div>
...
</div>
After looking over the properties of overlay, I solved this question by removing the dynamic property of overlaypanel.

p:outputPanel does not render page sections

I have two p:ouputPanels which have the rendered attribute. They should be rendered when the value of the underlying getter/setter changes. However, the underlying values change in the right order. The first panel disappears, However the second panel does not show up. Even NOT in the HTML code!
My two panels:
<p:outputPanel id="PanelParent">
<h:form>
<p:outputPanel id="PanelForm" rendered="#{PageService.isVisibilityForm()}">
<h:commandButton value="Button"
action="#{PageService.persist}"
styleClass="btn btn-primary opal_btn submit_form_new" />
</h:form>
</p:outputPanel>
<p:outputPanel id="PanelMessage" rendered="#{PageService.isVisibilityMessage()}">
//Message
</p:outputPanel>
</p:outputPanel>
I appreciate your answer!!!
-UPDATE-
In the code, I reference to the persist method and in this method I change the getter and setter of the visibility for each section.
-UPDATE1-
OK here is in fact my code:
<p:outputPanel id="parentPanel">
<p:outputPanel id="PanelForm"
rendered="#{PageService.isVisibilityForm()}">
<div>
<div>
<h:form class="homepage_invitee_form" action="" method="POST">
<p:messages id="messages" showDetail="false" autoUpdate="true"
closable="true" />
<h:inputText required="true"
value="#{PageService.instance.name}"
name="name" placeholder="Last Name"
styleClass="lastname_new" id="lastname_new"
type="text placeholder" />
<h:commandButton value="Press"
action="#{PageService.persist()}"/>
<f:ajax render="" />
</h:commandButton>
</h:form>
</div>
</div>
</p:outputPanel>
<p:outputPanel id="PanelThank"
rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
</p:outputPanel>
I really do not see where it fails? ;(
It's like Xtreme Biker said <f:ajax> render attribute will render elements that are already present in the DOM. In your case, <p:outputPanel id="PanelThank"> render attribute was evaluating to false so it was not in the DOM. Therefore, <f:ajax> could not render it. You need to point to something that is always visible. Change
<f:ajax render="" />
to
<f:ajax render=":PanelThank" />
but more importantly change
<p:outputPanel id="PanelThank" rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
to
<p:outputPanel id="PanelThank">
<p:outputPanel rendered="#{PageService.isVisibilityThank()}">
<div>
Message
</div>
</p:outputPanel>
</p:outputPanel>
Consider refactoring your code also. For instance, action and method in <h:form> is not needed.
rendered attribute defines if JSF will render your component in the DOM tree. Your problem is you cannot update a component which is not in the tree because you simply don't have it:
<p:outputPanel id="PanelForm" rendered="#{PageService.isVisibilityForm()}">
//my Form
<p:outputPanel>
<!--Fails if not PageService.isVisibilityForm(), because you don't have the component itself in the tree! So can't find it-->
<p:ajax update="PanelForm"/>
Your best is to wrap your content in another container which is always rendered and update it instead of the other one:
<h:panelGroup id="updatablePanel">
<p:outputPanel rendered="#{PageService.isVisibilityForm()}">
//my Form
<p:outputPanel>
</h:panelGroup>
<p:ajax update="updatablePanel"/>

jsf 2.0 f:convertDateTime for util.Date with using custom date pattern from .properties

After changing locale in action mathod with return null as I apologize page should be reload but field with date doesn't change after first click on link for changing locale. I use MyFaces
I have a page where user can set locale and after changing locale I can't get desired format of date just after second time push on link for changing locale. I use bean for localization from this post
localiztion article
I cant understand why in
<h:outputText value="#{newsVar.date}">
<f:convertDateTime pattern="#{msg['date.pattern']}" />
</h:outputText>
!!!! Edited!!!
I have some problems with getting id of dataField whem I use facets in mainLayout.xhtml
<f:view locale="#{localeManager.language}">
<div id="wrapper">
<div class="header">
<ui:insert name="header">
<ui:include src="/pages/template/commonHeader.xhtml" />
</ui:insert>
</div>
<div class="content_container">
<ui:insert name="content" />
</div>
</div>
</f:view>
commonHeader is included commandLink
<ui:composition>
<h:form>
<h1>
<h:outputText value="#{msg['header.text']}" />
</h1>
<div class="lang_selector">
<h:commandLink action="#{localeManager.changeLanguage('ru')}"
value="#{msg['header.language.ru']}">
<!-- <f:ajax render=":listGroupId:dateField" />-->
</h:commandLink>
<h:commandLink action="#{localeManager.changeLanguage('en')}"
value="#{msg['header.language.en']}">
<!-- <f:ajax render=":listGroupId:dateField" />-->
</h:commandLink>
</div>
</h:form>
</ui:composition>
And in current page I have next
<ui:composition template="/pages/layouts/mainLayout.xhtml">
<ui:define name="content">
<f:event type="preRenderView" listener="#{news.showNews}" />
<h:form id="listForm" prependId="false">
<h:panelGroup id="listGroupId">
<ui:repeat var="newsVar" value="#{news.newsList}">
<div class="news_item">
<div class="news_title">
<h1>
<h:outputText value="#{newsVar.title}" />
</h1>
<div class="news_date">
<h:outputText id="dateField" value="#{newsVar.date}">
<f:convertDateTime pattern="#{msg['date.pattern']}" />
</h:outputText>
</div>
As you can see a try to get id of "dateField" but that id in different form. I read next article How to JSF 2.0: – render components outside of the form I understand that I should set <h:form id="listForm" prependId="false"> then I can set elementId in <f:ajax/> without name of form but I get error javax.faces.FacesException - Component with id::listGroupId:dateField not found.
And I find that: The element which is specified in render must be already present in the client side HTML DOM tree. May be that's why I have this problem
Please, help me...
Why is pattern for date changed only from 2nd time?
I would recommend the following
1) change setLanguage into changedLanguage (inside that method set the language attribute)
in general , its a bad practive to use setters in action attribute , and in general use get/set prefix in actionmethods
2) add f:ajax
<h:commandLink action="#{localeManager.changedLanguage('en')}" value="#msg['header.language.en']}">
<f:ajax render="dateField"/>
</h:commandLink>
3) change h:outputText into
<h:outputText id="dateField" value="#{newsVar.date}">
<f:convertDateTime pattern="#{msg['date.pattern']}" />
</h:outputText>

Scrolling to anchor or page bottom after JSF form validation fail

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.

Enable JSF commandbutton only if all the other components are error free

I am using icefaces in my application.
There is a form in the page, which has a couple of input fields.
I would like to enable the commandbutton only if the fields are valid(no errors for the other components)
Is it possible to do it ?
example code
<ice:form>
<ice:panelGrid columns="2">
<ice:outputLabel>Enter Date</ice:outputLabel>
<ice:panelGroup>
<ice:selectInputDate renderAsPopup="true" id="InputDate" value="#{Bean.FormDate}" partialSubmit="true" ></ice:selectInputDate>
<ice:message for="InputDate" />
</ice:panelGroup>
<ice:outputLabel>Days</ice:outputLabel>
<ice:panelGroup>
<ice:inputText value="#{Bean.days}"partialSubmit="true" id="inputDays">
<f:validateLongRange minimum="1" maximum="10"/>
</ice:inputText>
<ice:message for="inputDays"/>
</ice:panelGroup>
<ice:commandButton value="Submit" action="#{Bean.SomeAction}"></ice:commandButton>
</ice:panelGrid>
In the above code, I want to enable the submit commandbutton only if the days and date are valid(Don't have any error enqueued.
If you are using jsf 2.0 you can do something like this:
<ice:form>
<ice:panelGrid columns="2">
<ice:outputLabel>Enter Date</ice:outputLabel>
<ice:panelGroup>
<ice:selectInputDate renderAsPopup="true" id="InputDate"
value="#{Bean.FormDate}" partialSubmit="true"
binding="#{inputDateComponent}">
<f:ajax execute="#this" render="submit inputDateMessage" />
</ice:selectInputDate>
<ice:message id="inputDateMessage" for="InputDate" />
</ice:panelGroup>
<ice:outputLabel>Days</ice:outputLabel>
<ice:panelGroup>
<ice:inputText value="#{Bean.days}" partialSubmit="true"
id="inputDays" binding="#{inputDaysComponent}">
<f:validateLongRange minimum="1" maximum="10" />
<f:ajax execute="#this" render="submit inputDaysMessage" />
</ice:inputText>
<ice:message id="inputDaysMessage" for="inputDays" />
</ice:panelGroup>
<ice:commandButton id="submit" value="Submit"
action="#{Bean.SomeAction}"
disabled="#{!inputDateComponent.valid}" />
</ice:panelGrid>
</ice:form>
I haven't tested this specific example but you can see where I'm going. The input fields get evaluated on change and either show validation errors or create a condition where the commandButton is not disabled.
You could also use rendered= and make positive assertions if you want the button to only appear when the input fields are valid.
You could use a phase-listener as described here:
http://balusc.blogspot.com/2007/12/set-focus-in-jsf.html
The phase-listener in this example builds a string with client-ids that have messages attached. Check this string in a bean and create a bean property depending on whether there are ids with messages or not.
Then you can enable the command button depending on the bean property.
Switch each of your input fields to 'immediate="true"' and add a validator to the fields.
Have the validator set/unset a boolean to determine whether the fields contain valid data and do as sparrowhawk suggests and test this boolean value(s) in the rendered expression for the submit button.

Resources