I have a JSF 2.0 application using Primefaces 3.0M4 component library. I have the following input:
<p:inputText id="input" value="#{bean.value}" required="true">
<p:ajax event="blur" update="msg" />
</p:inputText>
<p:message id="msg" for="input" />
what I would like to do is that in case validation fails (the value is empty), focus returns to the component, forcing the user to enter a value. is this possible?
Also I would like that when user clicks the submit button; if validation fails there, the first component that did not pass the validation is focused.
Thanks,
Damian
It is possible, client-side, by using the required and requiredMessage attributes. The user can't submit the form and a error message is shown:
<h:outputLabel for="firstname" value="Firstname: *" />
<p:inputText id="firstname"
value="#{personBean.firstname}"
required="true" requiredMessage="You have to enter your name" label="Firstname">
<f:validateLength minimum="2" />
</p:inputText>
<p:message for="firstname" />
You could use primefaces message if you don't use requiredMessage attribute, because it will show you two warning messages and it's a bit strange...
For the focus it depends...what if you have two inputTexts? Do you want to show the focus only for the first one?
You can see a demo here: http://www.primefaces.org/showcase-labs/ui/pprAjaxStatusScript.jsf
Related
Hi is there any way through which i can read JSF command button action attribute value.My command button statement is
<h:commandButton id="cmdBtn" value="GO" action="#{managedBean.submit}"onclick="javascriptfunction()"/>
action attribute is getting value from managed bean and command button is within a form.
below is my select menu
<h:selectOneMenu id="workspaceOptions"
value="#{workSpaceBean.selectedItem}" class="selectMenu">
<f:selectItem id="header" itemLabel="Select" itemValue="#{null}" />
<f:selectItem id="option1" itemLabel="Assignments" itemValue="assignment" />
<f:selectItem id="option2" itemLabel="Preview" itemValue="preview" />
<f:selectItem id="option3" itemLabel="Edit Coverage" itemValue="editCoverage" />
<f:selectItem id="option4" itemLabel="attachment" itemValue="attachment" />
</h:selectOneMenu>
<h:commandButton id="cmdBtn" value="GO" class="commandButton"
action="#{workSpaceBean.submit}" onclick="javascriptfunction()" />`
For the options editCoverage,attachment i would be getting multiple outcomes based on some conditions in the managed bean.All i want to do is open the outcome views of these in new window and for remaining options need to remain in same page.
I have a table with <a:commandLink> that opens <rich:modalPanel> with additional info on the selected item. It works using reRendering modalPanel's inner <a:outputPanel> on click on the commandLink. Now the issue that all my facelets become usual input items (i.e simple selects instead of comboboxes) after reRender. Is there any way to make the server add the ui info to the reRendered result?
UPD I see the following messages in log
10:55:30,483 INFO [facelet] Facelet[/account/registration.xhtml] was modified # 10:55:30 AM, flushing component applied # 10:54:36 AM
UPD2 The issue happens only with the components that replace usual select, like selectOneMenu or selectonelistbox.
Code examples:
<rich:modalPanel id="fieldPropertiesPanel" >
<f:facet name="header">
<h:outputText value="Customize Field" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('fieldPropertiesPanel')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<rich:panel id="fieldPropertiesContent">
<s:decorate styleClass="itemType" template="/layout/edit.xhtml">
<h:selectOneMenu value="#{accountHome.currFieldType}">
<s:selectItems itemLabel="#{fieldType}" itemValue="#{fieldType}"
label="#{messages['ProjectFieldType_enum.'.concat(fieldType)]}"
value="#{accountHome.projectFieldTypes}" var="fieldType" />
</h:selectOneMenu>
</s:decorate>
</rich:panel>
</rich:modalPanel>
and the calling commandLink
<a:commandLink value="Edit" oncomplete="Richfaces.showModalPanel('fieldPropertiesPanel');"
reRender="fieldPropertiesContent" />
Recently I have update my application to JSF 2.1.7 and PrimeFaces 3.4.2. When the below dialog is used for adding a new group, I get an "Name size must be between 1 and 40" validation error, prior to saving the new group. It happens when I click the picker's add button. I understand that this message is shown because the validation failed. The validation error doesn't appear when I add immediate=true to p:commandButton. I don't know what triggered the validation.
<h:form id="formg" prependId="false">
<!-- messages -->
<p:growl id="msgsg" showDetail="true" />
<!-- data table -->
<ui:include src="/WEB-INF/flows/groupsTable.xhtml" />
<p:separator />
<!-- bottom tool bar -->
<ui:include src="/WEB-INF/flows/groupsToolBar.xhtml" />
<!-- preview, edit dialog -->
<ui:include src="/WEB-INF/flows/groupsDialog.xhtml" />
</h:form>
<p:dialog id="dialogg" header="#{groupsBean.dialogTitle}"
widgetVar="groupsDialog" dynamic="true" resizable="false" width="800"
height="600" showEffect="fade" hideEffect="fade" modal="true">
<p:ajax event="close" listener="#{groupsBean.refresh}"
immediate="true" update=":formg" global="false" process="#this" />
<p:tabView id="tabPicker">
<p:tab title="General">
<h:panelGrid id="displayg" columns="2">
<h:outputText value="#Group name*:" />
<p:inputText value="#{groupsBean.selectedGroup.name}" size="40"
readonly="#{!groupsBean.updatable}" maxlength="40" />
</h:panelGrid>
</p:tab>
<p:tab title="Members">
<ui:include src="/WEB-INF/custom/picker.xhtml">
... some params passed to picker
</ui:include>
</p:tab>
</p:tabView>
</p:dialog>
The picker is similar to <p:password> and it is made up from two p:dataTable components and 4 buttons between them. The buttons are grouped together with a h:panelGrid. The button attributes are similar. Here is button sample code:
<p:outputPanel autoUpdate="true">
<p:commandButton actionListener="#{eval.evaluateAsMethod(pickerAdd)}"
update="source, target, #{messages}" immediate="true"
disabled="#{pickerSourceDisabled}"
icon="ui-icon ui-icon-arrowthick-1-s" />
</p:outputPanel>
source, target are the ids of the two datatables. pickerAdd is passed as param with a value of groupsBean.picker.add. The tables contain FooDomain objects.
public class FooDomain implements Serializable {
...
#NotNull
#Size(min = 1, max = 40)
#Column(name = "NAME")
private String name;
...
}
The PrimeFaces <p:commandButton> processes by default the entire form (as in, process="#form"), so it would by default trigger all validations. Your validation error is coming from the #Size restriction on the property. If you would like to process only the button's own action, then you should add process="#this".
<p:commandButton ... process="#this" />
The immediate="true" can also be used to solve it, but it behaves under the covers somewhat different: the entire form is still processed, but the action is invoked in APPLY_REQUEST_VALUES phase instead of INVOKE_ACTION phase. And only the input components which also have immediate="true" set will also be processed and others will be skipped.
I need to compare two calendar dates. I wrote the javascript function too. But how can I execute this function(which event?) on select a date from the datePicker? See my JSF code
<h:outputText value="From Date" />
<p:calendar id="fDate" value="#{backingBean.fDate}" mode="popup"
showOn="button" pattern="dd/MM/yyyy">
</p:calendar>
<p:message id="fId" for="fDate" />
<h:outputText value="To Date" />
<p:calendar id="tDate" value="#{backingBean.tDate}" mode="popup"
showOn="button" pattern="dd/MM/yyyy" ondateselected="compareDate();" />
<p:message id="tId" for="tDate" />
ondateselected="compareDate(); is not executing at all, it is wrong ,I guess.
I'm using primefaces-3.0.M3 with JSF2.
not sure when exactly they changed it to use p:ajax , but maybe it was before 3.0M3
so try this way
<p:calendar value="#{backingBean.tDate}">
<p:ajax event=”dateSelect” oncomplete="compareDate();return false;" />
</p:calendar>
now when i think about it again i think you can put the js function in onsuccess="" and remove the return false;
For <f:selectItem> there is no rendered attribute. How can I hide a particular <f:selectItem> under <h:selectOneRadio>?
<h:selectOneRadio id="radio1" styleClass="selectOneRadio" value="#{}" rendered="#{}">
<f:selectItem itemValue="ALL" itemLabel="#{ONE}" />
<f:selectItem itemValue="PRIVATE" itemLabel="#{TWO}" />
<f:selectItem itemValue="GROUP" itemLabel="#{THREE}" />
</h:selectOneRadio>
In above code I want to hide the second item.
The <f:selectItem> is a tag handler (which evaluated during view build time), not a JSF component (which is evaluated during view render time). You can only show/hide it with another tag handler, such as JSTL <c:if>.
<h:selectOneRadio value="#{bean.selectedItem}">
<f:selectItem itemValue="ALL" itemLabel="#{ONE}" />
<c:if test="#{!bean.showPrivate}">
<f:selectItem itemValue="PRIVATE" itemLabel="#{TWO}" />
</c:if>
<f:selectItem itemValue="GROUP" itemLabel="#{THREE}" />
</h:selectOneRadio>
Only when #{bean} is been prepared during view render time by an iterating JSF component such as <h:dataTable> or <ui:repeat> then the above won't work and you really have to do it in the backing bean code instead.
You can use f:selectItems .
For example:
<h:selectOneRadio id="radio1" styleClass="selectOneRadio" rendered="true" value="controller.value">
<f:selectItems value="#{controller.items}" />
</h:selectOneRadio >
This is class controller:
public clss Controller(){
private List<SelectItem> items = new ArrayList<SelectItem>();
public Collection<SelectItem> getItems(){
if (items.isEmpty()){
createItems();
}
return this.items;
}
public private createItems(){
if (condition){ //Here you can hidden the selectItem
this.items.add(new SelectItem(value,label));
}
}
}
you can try to surround it in
<h:panelGrid rendered="">
h:selectOneRadio
</h:panelGrid >
EDITED:
or use
<h:panelGroup>
Edit
its not good idea but i think you can do it by code redundancy as follow
<h:panelGroup rendered="#{}">
<h:selectOneRadio id="radio1" styleClass="selectOneRadio" rendered="true">
<f:selectItem itemValue="ALL" itemLabel="one" />
<f:selectItem itemValue="PRIVATE" itemLabel="two" />
<f:selectItem itemValue="GROUP" itemLabel="THREE" />
</h:selectOneRadio>
</h:panelGroup>
<h:panelGroup rendered="#{!}">
<h:selectOneRadio id="radio11" styleClass="selectOneRadio" rendered="true">
<f:selectItem itemValue="ALL" itemLabel="one" />
<f:selectItem itemValue="PRIVATE" itemLabel="two" />
</h:selectOneRadio>
</h:panelGroup>
I am not able to understand the markup/source, but guessing from the heading, I will suggest
$("a.selectOneRadio f.selectItem").hide()
should do the job assuming
1) selectOneRadio is the class name of the a tag.
2) selectItem is the class name of the f tag.
3) f is not a tag in HTML. So if `f` is also a class name, you would have to use `.f .selectItem`
If you can please provide some details in the question.
There is also a disabled property on f:selectItem elements, if that fulfills your needs. Otherwise you will have to add them manually as Michel Foucault suggested.