I have this form:
<h:form id="form">
<h:panelGrid columns="3" >
<h:outputLabel for="name" value="Name:" />
<h:inputText id="name" value="#{register.person.name}" >
<f:ajax event="blur" listener="#{register.validateName}" render="m_name" />
</h:inputText>
<rich:message id="m_name" for="name" ajaxRendered="false"/>
<!-- other fields -->
<h:commandButton value="Register" action="#{register.registerPerson}" >
<f:ajax execute="#form" render="out" />
</h:commandButton>
<h:outputText value="#{register.recordStatus}" id="out" />
</h:panelGrid>
If I try to register some person without a name and no error message is displayed. Instead, an error message appears when removing a person : <f:ajax execute="#form" render="out" />.
Why is this happening ?
You need to include the ID of the message in the render as well.
<f:ajax execute="#form" render="m_name out" />
You can also just render the entire form if you have more than one message.
<f:ajax execute="#form" render="#form" />
See also:
Communication in JSF 2.0 - Ajax Validation
Might be a bit late, but...
The attribute ajaxRendered of <rich:message> has a default value of true, which forces it to appear in AJAX responses.
You set it to false in Your form, and so You have to specify, which AJAX calls should re-render it.
Related
When I am using a PrimeFaces p:commandButton
<p:commandButton action=#{bean.action} />
I don't see the the validation messages for inputs (both the default h: ones or the PrimeFaces p: ones.) For example with
<f:validateRequired />
When I am using default command button like
<h:commandButton action=#{bean.action} />
I do see the validations. What can be the cause of this difference?
I am using Prime Faces 3.5 with Mojarra 2.1.18
<h:form id="reliefhourheadcopy-form">
<h:panelGrid columns="1">
<h:outputText value="Kopiere Entlastungsstunden von" />
<h:outputText value="Semester: #{reliefHourHeadManagedBean.reliefHourHead.semester}" />
<h:outputText value="Jahr: #{reliefHourHeadManagedBean.reliefHourHead.year}" />
<h:outputText value="nach" />
</h:panelGrid>
<h:panelGrid columns="3">
<h:outputText value="Semester:" />
<p:selectOneMenu id="semester" value="#{reliefHourHeadManagedBean.semester}">
<f:selectItems value="#{reliefHourHeadManagedBean.semesterTypes}" />
</p:selectOneMenu>
<h:message for="semester" />
<h:outputText for="yearSpinner" value="Jahr:" />
<p:spinner id="yearSpinner" value="#{reliefHourHeadManagedBean.year}" maxlength="4" min="2000" max="2030" size="4">
<f:validateRequired />
<f:validateLongRange minimum="2000" maximum="2030" />
</p:spinner>
<h:message for="yearSpinner" />
</h:panelGrid>
<h:panelGrid columns="1" style="margin-top:25px">
<p:commandButton action="#{reliefHourHeadManagedBean.copyReliefHourHead}" value="Kopieren" icon="ui-icon-copy" >
<f:param name="reliefhourhead_id" value="#{reliefHourHeadManagedBean.reliefHourHeadId}" />
</p:commandButton>
</h:panelGrid>
</h:form>
Like #Partlov wrote in the comments below the question,
Main difference is that p:commandButton is AJAX by default, and h:commandButton is non-AJAX by default.
So
<p:commandButton ... />
is more like
<h:commandButton ...>
<f:ajax/>
</h:commandButton>
but
<p:commandButton ...>
<p:ajax/>
</p:commandButton>
is wrong and leads to undefined behaviour
or the other way around
<h:commandButton ... />
is like
<p:commandButton ajax="false" ... />
The p:commandButton will submit the form by default. However by default it does not update anything in the form after the ajax call is finished so the messages are not displayed (which in development mode would have shown in the log files that messages were enqueued but not displayed) . The non-ajax h:commandButton does a full page refresh that does show the messages. In order to get the form (which contains the message component) updated when using the p:commandButton you need to add the update attribute:
<p:commandButton action="#{reliefHourHeadManagedBean.copyReliefHourHead}" value="Kopieren" icon="ui-icon-copy" update="#form">
<f:param name="reliefhourhead_id" value="#{reliefHourHeadManagedBean.reliefHourHeadId}" />
</p:commandButton>
Adding an (superfluous) f:ajax or p:ajax inside a p:commandXXX can result in strange undefined behaviour
See also
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
When I am using a PrimeFaces p:commandButton
<p:commandButton action=#{bean.action} />
I don't see the the validation messages for inputs (both the default h: ones or the PrimeFaces p: ones.) For example with
<f:validateRequired />
When I am using default command button like
<h:commandButton action=#{bean.action} />
I do see the validations. What can be the cause of this difference?
I am using Prime Faces 3.5 with Mojarra 2.1.18
<h:form id="reliefhourheadcopy-form">
<h:panelGrid columns="1">
<h:outputText value="Kopiere Entlastungsstunden von" />
<h:outputText value="Semester: #{reliefHourHeadManagedBean.reliefHourHead.semester}" />
<h:outputText value="Jahr: #{reliefHourHeadManagedBean.reliefHourHead.year}" />
<h:outputText value="nach" />
</h:panelGrid>
<h:panelGrid columns="3">
<h:outputText value="Semester:" />
<p:selectOneMenu id="semester" value="#{reliefHourHeadManagedBean.semester}">
<f:selectItems value="#{reliefHourHeadManagedBean.semesterTypes}" />
</p:selectOneMenu>
<h:message for="semester" />
<h:outputText for="yearSpinner" value="Jahr:" />
<p:spinner id="yearSpinner" value="#{reliefHourHeadManagedBean.year}" maxlength="4" min="2000" max="2030" size="4">
<f:validateRequired />
<f:validateLongRange minimum="2000" maximum="2030" />
</p:spinner>
<h:message for="yearSpinner" />
</h:panelGrid>
<h:panelGrid columns="1" style="margin-top:25px">
<p:commandButton action="#{reliefHourHeadManagedBean.copyReliefHourHead}" value="Kopieren" icon="ui-icon-copy" >
<f:param name="reliefhourhead_id" value="#{reliefHourHeadManagedBean.reliefHourHeadId}" />
</p:commandButton>
</h:panelGrid>
</h:form>
Like #Partlov wrote in the comments below the question,
Main difference is that p:commandButton is AJAX by default, and h:commandButton is non-AJAX by default.
So
<p:commandButton ... />
is more like
<h:commandButton ...>
<f:ajax/>
</h:commandButton>
but
<p:commandButton ...>
<p:ajax/>
</p:commandButton>
is wrong and leads to undefined behaviour
or the other way around
<h:commandButton ... />
is like
<p:commandButton ajax="false" ... />
The p:commandButton will submit the form by default. However by default it does not update anything in the form after the ajax call is finished so the messages are not displayed (which in development mode would have shown in the log files that messages were enqueued but not displayed) . The non-ajax h:commandButton does a full page refresh that does show the messages. In order to get the form (which contains the message component) updated when using the p:commandButton you need to add the update attribute:
<p:commandButton action="#{reliefHourHeadManagedBean.copyReliefHourHead}" value="Kopieren" icon="ui-icon-copy" update="#form">
<f:param name="reliefhourhead_id" value="#{reliefHourHeadManagedBean.reliefHourHeadId}" />
</p:commandButton>
Adding an (superfluous) f:ajax or p:ajax inside a p:commandXXX can result in strange undefined behaviour
See also
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
when i click on the command button. validate method is getting called but the error message is not getting displayed..
here is my code..
<h:form id="form">
<h:body>
<p:panel style="width:500px">
<h:outputLabel for="year" value="Select Year: *" style="font-weight:bold" />
<p:selectOneMenu id="year" value="#{leaveBean.year}">
<f:selectItem itemLabel="Select One" itemValue="null" />
<f:selectItems value="#{leaveBean.yearDTO}" var="currentUser" itemValue="#{currentUser.name}" itemLabel="#{currentUser.name}" />
<f:validator validatorId="LeaveCardValidator" />
</p:selectOneMenu>
</p:panel>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails" id="button"/>
<h:message for="year" style="color:red"/>
You seem to expect that JSF auto-updates the <h:message> on every ajax request. This is untrue. Perhaps you're confusing with PrimeFaces <p:messages> or <p:growl> which have each an autoUpdate attribute which enables you to tell them to auto-update themselves on every ajax request.
You really need to make sure that the <h:message> is covered by the ajax update. Just give it an ID
<h:message id="yearMessage" ... />
and include it in the client ID collection of the ajax update
<p:commandButton ... update="updateList updateDetails yearMessage" />
An alternative would be to replace <h:message> by <p:messages autoUpdate="true">.
Not sure where are the updateList and updateDetails are located but in the example give above you should use update="#form" instead or in addtion like this:
update="updateList updateDetails #form"
so that the form will be rendered again...
just use one of these :
update the whole form in order to update the content of
<h:message />
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="#form" id="button"/>
or give the <h:message /> an id and id this id to the <p:commandButton/>
<h:message id="msg" for="year" style="color:red"/>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails,msg" id="button"/>
This is my form:
<h:body>
<h:form>
<h:panelGrid columns="3" >
<h:outputLabel for="name" value="Primeiro nome:" />
<h:inputText id="name" value="#{register.person.name}" >
<f:ajax event="blur" render="m_name" listener="#{register.validateName}" />
</h:inputText>
<rich:message id="m_name" for="name" />
//.. others fields
</h:panelGrid>
</h:form>
</body>
When i try to execute on Glassfish gives the follow error :
javax.servlet.ServletException: <f:ajax> contains an unknown id 'm_name' - cannot locate it in the context of the component name
But if i change <rich:message ..> by <h:message..> it works (I want it works with rich:message because it returns an image and a message )
Why this is happening ? Never happened with me before, until now.
The RichFaces component reference tells this about the <rich:messages>:
13.1.1. Basic usage
...
The <rich:message> component is automatically rendered after an Ajax request. This occurs without the use of an component or a specific reference through the render attribute of the Ajax request source.
So, I'd just remove the render attribute on m_name and replace <f:ajax> by <a4j:ajax>.
<h:inputText id="name" value="#{register.person.name}" >
<a4j:ajax event="blur" listener="#{register.validateName}" />
</h:inputText>
<rich:message id="m_name" for="name" />
If you want to explicitly specify it anyway, you can set ajaxRendered="false" on the <rich:message> component.
<h:inputText id="name" value="#{register.person.name}" >
<f:ajax event="blur" listener="#{register.validateName}" render="m_name" />
</h:inputText>
<rich:message id="m_name" for="name" ajaxRendered="false" />
Looks like a richfaces behavior to me. I suspect you will have to file a bug report.
A work-around is to enclose the rich:message tag inside a rich:message tag inside a div tag, then give the div tag an id="m_name".
I have bean struggling to understand how to use the rich:popupPanel component in the right way. There are (at least not that I could find) few post about how to use the rich:popupPanel and how to submit values from it.
To make matter worse the panel seams to add (when checking the html) a hard coded "_content" to its component id name (to the div generated). I have tried to use aj4:region tag to partial render the complete form. But that didn't seamed to work, cause nothing where posted to managed bean. So now I have one option left, where the panel has its own form, outside the main one on the page.
I can see that the evaluation of the form (popup) values is happening, but not the execution of the bean function that persist the values (I see the POST request of the command button). The only reason I can think of at the moment, is that the pop-up panel use another bean to persist the values that the main form on the page (both of them are session scoped).
I am thinking of omit the pop-up panel all together, since it seams so hard to make this work. Maybe its a well know secret, since it so few post about it. It behaves the same if if use componentController or only a a4j:commanLink.
How is it possible to submit values from a rich:popupPanel and invoke a backing bean function to persist the pop-up form values ?
Appreciate if someone can shed some light on this, greetings Chris.
I use Richfaces 4.0-final on Glassfish 3.1
<h:form id="main_form">
<!-- Command for popup -->
<a4j:commandLink actionListener="#{userController.prepareCreateSysRequest}" oncomplete="#{rich:component('popup_sys_user_req_form:popup_sys_user_req')}.show(); return false;"
execute="#this" value="Request New Sector/Category" />
...
<a4j:commandButton action="#{projectController.Create}" ...>
</h:form>
<h:form id="popup_sys_user_req_form">
<rich:popupPanel id="popup_sys_user_req" modal="true" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="New Project Request" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputLabel value="Request New:" />
<h:selectOneMenu id="sys_req_type" value="#{userController.selectedSysRequestType}" required="true" requiredMessage="Request Type is required" title="Request Type">
<f:selectItems value="#{userController.getSysRequestTypeItems()}">
</f:selectItems>
</h:selectOneMenu>
<h:outputLabel value="Description:" />
<h:inputTextarea id="user_req_desc" value="#{userController.selectedSysUserRequest.description}" required="true" requiredMessage="Decription is missing" />
</h:panelGrid>
<a4j:commandButton action="#{userController.CreateSysUserRequest}" onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;" execute="#form" render="popup_sys_user_req_form" value="Send Request" />
</rich:popupPanel>
</h:form>
For what I have done I used to have the issue to got to submit twice only the first time.
To fix it the form got to be outside the popupPane. And also that the popupPanel should have the attibute domElementAttachment="form".
Example.
<h:form>
<rich:popupPanel id="shipmentItemUpdateDialog"
autosized="true"
domElementAttachment="form">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="#{shipmentBundle.shipmentItemDetailsHeader}" />
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:commandLink>
<h:graphicImage value="/core/images/modal/close.png"/>
<rich:componentControl target="shipmentItemUpdateDialog" operation="hide" />
</h:commandLink>
</f:facet>
<h:outputText for="shipmentItemName"
value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemName}"
/>
<h:inputText id="shipmentItemName"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.name}"
label="#{shipmentBundle.shipmentItemName}"
size="40" >
</h:inputText>
<h:outputText for="shipmentItemCode"
value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemCode}"
/>
<h:inputText id="shipmentItemCode"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.code}"
label="#{shipmentBundle.shipmentItemCode}"
size="40" >
</h:inputText>
<h:outputText value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemAmount}"
/>
<h:inputText id="shipmentItemAmount"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.amount}"
label="#{shipmentBundle.shipmentItemAmount}"
size="4" >
<f:validateLongRange minimum="1"/>
</h:inputText>
<h:outputText value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemNeedsCooling}"
/>
<h:selectBooleanCheckbox id="shipmentItemNeedsCooling"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.needsCooling}"
label="#{shipmentBundle.shipmentItemNeedsCooling}"
/>
<h:outputText for="shipmentItemDetails"
value="#{shipmentBundle.shipmentItemDetails}"
/>
<h:inputTextarea id="shipmentItemDetails"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.details}"
label="#{shipmentBundle.shipmentItemDetails}"
cols="38"
rows="5"
/>
</h:panelGrid>
<h:panelGrid columns="1" dir="LTR">
<h:panelGrid columns="2" dir="LTR">
<a4j:commandButton value="#{coreBundle.acceptButton}"
action="#{shipmentItemController.onUpdate()}"
render="shipmentItemsTable">
</a4j:commandButton>
<h:commandLink value="#{coreBundle.closeLink}"
immediate="true">
<rich:componentControl target="shipmentItemUpdateDialog" operation="hide" />
</h:commandLink>
</h:panelGrid>
<h:outputText value="#{coreBundle.requiredText}"/>
</h:panelGrid>
</rich:popupPanel>
</h:form>
I hope this helps.
I think you got it right.. think of the pop-up as a regular page. To submit and close the pop-up, do something like this:
<a4j:commandButton value="Save" onclick="#{rich:component('panelId}.hide();" render="..."/>
Hope this helps..