Versions :
Aapche MyFaces 2.1.14
RichFaces 4.3.5
Issue :
I am facing an issue to insert space between rows of h:panelGid. Below is the general layout for the page :
User Id : <empty space>
<INPUT-BOX> <empty space>
<!-- space here -->
Password 1 : <empty space>
<INPUT-BOX> Description Text
<!-- space here -->
Password 2 : <empty space>
<INPUT-BOX> Description Text
To get above layout , i have used below code. Each inner panel grid holds 4 elements in two columns.
Top panel grid wraps all inner panel grids with column as 1.
The issue is , I am not able to get space betwen two inner panel grids or more specifically between table cells.
I have tried using :
1)cellspacing
2)rowClasses
But none of the two approches are working. The style used for rowClasses is given below.
When debugged through browser , it seems that rowClasses does get applied to each <tr> of table.
Can anybody please help ?
Code :
<h:panelGrid columns="1" rowClasses="tableCell,tableCell,tableCell,tableCell" cellspacing="100px">
<h:panelGrid columns="2">
<h:outputText value="User ID:" styleClass="label"/>
<h:outputText value=""/>
<h:inputText id="userid" name="userid" styleClass="input"/>
<h:outputText value=""/>
</h:panelGrid>
<!-- space here -->
<h:panelGrid columns="2">
<h:outputText value="Password1:" styleClass="label"/>
<h:outputText value=""/>
<h:inputText id="passwd1" name="passwd1" styleClass="input"/>
<h:outputText value="This is password 1"/>
</h:panelGrid>
<!-- space here -->
<h:panelGrid columns="2">
<h:outputText value="Password2:"/>
<h:outputText value=""/>
<h:inputText id="passwd2" name="passwd2" styleClass="input"/>
<h:outputText value="This is password 2 ."/>
</h:panelGrid>
<!-- space here -->
<h:commandButton id="submit" styleClass="button" value="Submit" action="#{bean.action}"/>
</h:panelGrid>
<!-- style -->
.tableCell{
margin-top : 100px;
}
Related
Issue with the pattern year 2020
In the calendar popup it is selected as is but upon selection it is set as 3/29/20
The value gets stored as 29-MAR-20 in the database
Data type of date2 is DATE in the database
But the outputText value shows it as 03/29/0020.
Correct output text should be 03/20/2020
<h:form id="form">
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="popup" value="Popup:" />
<p:calendar id="popup" value="#{calendarView.date2}" />
</h:panelGrid>
<p:commandButton value="Submit" update="msgs" action="#{calendarView.click}" icon="pi pi-check" />
<p:dialog modal="true" resizable="false" header="Values" widgetVar="dlg" showEffect="fold">
<p:panelGrid id="display" columns="2" columnClasses="label,value">
<h:outputText value="Popup:" />
<h:outputText value="#{calendarView.date2}">
<f:convertDateTime pattern="MM/dd/yyyy" />
</h:outputText>
</p:panelGrid>
</p:dialog>
</h:form>
web.xml
<context-param>
<param-name>javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZONE</param-name>
<param-value>true</param-value>
</context-param>
Tested with the date selection of 6/27/99
The value gets stored as 27-JUN-99 in the database
The output was shown as expected / correct out put - 06/27/1999
I would like to have some help on the following problem and right now I am very grateful for the help and attention.
I have a form in JSF 2 / Primefaces 5.1 where a component updates another component in selection, both components are required.
My problem occurs after validation, is after I fill one of the fields, when this happens the component automatically populates the other field, however the validation style continues in the second component.
Please see the SS, for better better understanding:
Before the submit:
Stopping the fields required
Filling of the fields and re submit:
How can I change this behavior and make the style stay right in the second field, I've tried many ways and I am out of ideas, everything else works perfectly except the validation css
My Code:
<h:form id="stepInsertFormId" acceptcharset="UTF-8">
<p:panelGrid id="stepInsertPanelId" styleClass="formPanelGridPage" cellpadding="7" >
<p:row>
<p:column styleClass="adrGridLabel">
<p:outputLabel for="stageCodeInsertSelectId"
value="#{myMsg['common.stage']}"
title="#{myMsg['common.stage.title']}"
styleClass="myGridLabel" />
</p:column>
<p:column styleClass="adrGridInput" style="vertical-align: bottom;">
<p:selectOneMenu id="stageCodeInsertSelectId"
value="#{Step.stepInsert.selectedStage}"
var="stage"
converter="basedEntityConverter"
label="#{myMsg['common.stageCode.title']}"
filter="true"
required="true"
filterMatchMode="startsWith" >
<f:selectItem itemLabel="#{myMsg['common.select']}" itemValue="" />
<f:selectItems value="#{Step.stages}"
var="stageInsert"
itemLabel="#{stageInsert.id.stageCode}"
itemValue="#{stageInsert}" />
<p:column>
<h:outputText value="#{stage.id.stageCode}" />
</p:column>
<p:column>
<h:outputText value="#{stage.description}" />
</p:column>
<p:ajax event="change" process="#this"
update="stepInsertPanelId, :myMessagesId"
listener="#{Step.doReloadStepsInsert}" />
</p:selectOneMenu>
<p:spacer width="5px" height="1px"/>
<p:selectOneMenu id="stageDescriptionInsertSelectId"
value="#{Step.stepInsert.selectedStage}"
var="stage"
converter="basedEntityConverter"
filter="true"
required="true"
filterMatchMode="startsWith"
style="width:260px"
label="#{myMsg['common.stageDescription.title']}">
<f:selectItem itemLabel="#{myMsg['common.select']}" itemValue="" />
<f:selectItems value="#{Step.stages}"
var="stageInsert"
itemLabel="#{stageInsert.description}"
itemValue="#{stageInsert}" />
<p:column>
<h:outputText value="#{stage.id.stageCode}" />
</p:column>
<p:column>
<h:outputText value="#{stage.description}" />
</p:column>
<p:ajax event="change" process="#this"
update="stepInsertPanelId"
listener="#{Step.doReloadStepsInsert}" />
</p:selectOneMenu>
</p:column>
The problem is related to the life cycle of the update phase, the moment the ajax will upgrade the second field it loses the reference of ids, this behavior is already provided and there is a tag resetValue Primefaces, to work around this behavior:
this the final solution:
<p:ajax event="change" process="#this"
update="stageCodeInsertLabelId, stageCodeInsertSelectId
, stageDescriptionInsertSelectId
, :myMessagesId"
resetValues="true"
listener="#{Step.doReloadStepsInsert}" />
The default value is false.
This post helped me to understand and solve this problem behavior
How can I populate a text field using PrimeFaces AJAX after validation errors occur?
In my application, I call the value change listener on change of values in a listbox.
The value change listener should update the values of four fields - 2 input text fields and 2 combo boxes ( dropdown boxes). The bean scope is request. I am using JSF 1.2 version.
the jsp file:
<h:selectManyListbox id="FSIBUCKET" required="true"
rendered="#{mangAreaSignOff.renderSelectedFSIBUCKET}"
valueChangeListener="#{mangAreaSignOff.handleFSIBucketValueChange}"
onchange="submit(); javascript:waiton();" style="width:230px"value="#{mangAreaSignOff.selectedFsiBucket}" >
<f:selectItems value="#{mangAreaSignOff.fsiBucketList}" />
</h:selectManyListbox>
the java code:
public void handleFSIBucketValueChange(ValueChangeEvent vce)
{
Object[] selectedFSIBucket = (Object[]) vce.getNewValue();
setSelectedFsiBucket(selectedFSIBucket);
getFSIBucketValueChangeResults();
}
public void getFSIBucketValueChangeResults()
{
Object [] tempFSIBucket = getSelectedFsiBucket() ;
String FSIBucket = getArrayToString(tempFSIBucket, ";");
List<String> result = mangAreaAPI.getFSIBucketValueChanges(FSIBucket);
mangAreaVO.setSelectedThresholdcategory(result.get(0));
mangAreaVO.setSelectedThresholdAmount(result.get(1));
mangAreaVO.setSelectedThresholdType(result.get(2));
mangAreaVO.setSelectedThresholdPercent(result.get(3));
}
I need help to identify where the flow goes wrong.
On change of the listbox value, the 4 fields are not updated. In java class I am able to see the updated values. but in screen it is not updated. Please let me know if any more explanation is needed in my question.
<h:panelGrid columns="10">
.
some other fields
.
.
<!-- Threshold Category -->
<h:panelGroup styleClass="text2"
rendered="#{mangAreaSignOff.renderInputThresholdCategory}">
<h:outputText value="MGT_LABEL_THRESHOLDCATEGORY" escape="false"
converter="com.db.smis.planus.TermConverter" styleClass="text2" />
<f:verbatim>:</f:verbatim>
</h:panelGroup>
<h:panelGroup
rendered="#{!mangAreaSignOff.renderInputThresholdCategory}">
<h:outputText value=" " escape="false" />
</h:panelGroup>
<!-- Threshold Amount -->
<h:panelGroup styleClass="text2"
rendered="#{mangAreaSignOff.renderInputAmount}">
<h:outputText value="MGT_LABEL_THRESHOLD" escape="false"
converter="com.db.smis.planus.TermConverter" styleClass="text2" />
<f:verbatim>:</f:verbatim>
</h:panelGroup>
<h:panelGroup rendered="#{!mangAreaSignOff.renderInputAmount}">
<h:outputText value=" " escape="false" />
</h:panelGroup>
<!-- Threshold Type -->
<h:panelGroup styleClass="text2"
rendered="#{mangAreaSignOff.renderThresholdType}">
<h:outputText value="MGT_LABEL_THRESHOLDTYPE" escape="false"
converter="com.db.smis.planus.TermConverter" styleClass="text2" />
<f:verbatim>:</f:verbatim>
</h:panelGroup>
<h:panelGroup rendered="#{!mangAreaSignOff.renderThresholdType}">
<h:outputText value=" " escape="false" />
</h:panelGroup>
<!-- Threshold Percentage -->
<h:panelGroup styleClass="text2"
rendered="#{mangAreaSignOff.renderThresholdPercent}">
<h:outputText value="MGT_LABEL_THRESHOLDPERCENT" escape="false"
converter="com.db.smis.planus.TermConverter" styleClass="text2" />
<f:verbatim>:</f:verbatim>
</h:panelGroup>
<h:panelGroup
rendered="#{!mangAreaSignOff.renderThresholdPercent}">
<h:outputText value=" " escape="false" />
</h:panelGroup>
.
.
.
.
</h:panelGrid>
I need to update the above 4 fields only.
I have ajax functionality to add names and show on the same page in a table manner with one image(on left of text) and one "X" image(on right to delete). It should be added like, from left to right and after completing one row, it should start from next row.
So I need to show an arraylist of string in p:datagrid or any other tag which can be used with same functionality.
I tried with combination of ui:repeat and p:panelgrid but I was unable to get datagrid funtionallty. I did not used p:dataTable because it would add new element on bottom side not as I need.
P.S.
<h:form>
<h:selectOneMenu id="recepients" value="#{controller.selected}">
<f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
<f:selectItem itemLabel="Info1" itemValue="Info1"></f:selectItem>
<f:selectItem itemLabel="Info2" itemValue="Info2"></f:selectItem>
<f:selectItem itemLabel="Info3" itemValue="Info3"></f:selectItem>
<f:selectItem itemLabel="Info4" itemValue="Info4"></f:selectItem>
<f:selectItem itemLabel="Info5" itemValue="Info5"></f:selectItem>
</h:selectOneMenu>
<p:commandButton value="Add" action="#{controller.submit}"
update="nameslist" />
<p:dataGrid id="nameslist" value="#{controller.tempNameList}"
var="name" columns="3">
<p:column>
<p:outputLabel value="%" />
</p:column>
<p:column>
<p:outputLabel value="#{name}" />
</p:column>
<p:column>
<p:commandLink value="X" action="#{controller.delete(name)}"
update="nameslist">
</p:commandLink>
</p:column>
</p:dataGrid>
</h:form>
The result should be like this...
% Abc X
% Xyz X
% dfd X
plz consider % as image and X as close symbol
The <p:dataGrid> doesn't support <p:column>. This column layout is only applicable to <p:dataTable>.
Replace all those <p:column> by a single grouping component, e.g. <h:panelGroup> or maybe <p:panel>, exactly as shown on showcase site.
<p:dataGrid id="nameslist" value="#{controller.tempNameList}" var="name" columns="3">
<h:panelGroup>
<p:outputLabel value="%" />
<p:outputLabel value="#{name}" />
<p:commandLink value="X" action="#{controller.delete(name)}" update="nameslist" />
</h:panelGroup>
</p:dataGrid>
Q: What syntax should i use to exclude a component when submitting a form using primefaces?
Using the process attribute i know how to include components.
<h:inputText id="included"/>
<p:commandButton value="button" process="included" actionListener="#{myBean.doStuff}/>
I've been trying to play around with syntax similiar to what is used in the answer here: How to exclude child component in ajax update of a parent component? but cant get it to work
<h:inputText id="notIncluded" styleClass="notIncluded"/>
<p:commandButton ... process="#(form :not(.notIncluded))"/>
Edit (doing the homework and adding an actual working example):
On glassfish 3.1.2.2 and primefaces 3.4.2
When i looked further, the exclusion works fine inside h:panelGrid
<h:form id="aForm">
<h:panelGrid columns="2">
<p:inputText id="inc" styleClass="included" required="true" />
<p:message for="inc" />
<p:inputText id="notInc" styleClass="notIncluded" required="true" />
<p:message for="notInc" />
<p:commandButton value="submit" process="#(form :not(.notIncluded))"
update=":aForm" />
</h:panelGrid>
</h:form>
But is no longer excluded inside a similar p:panelGrid
<h:form id="aForm">
<p:panelGrid columns="2">
<p:inputText id="inc" styleClass="included" required="true" />
<p:message for="inc" />
<p:inputText id="notInc" styleClass="notIncluded" required="true" />
<p:message for="notInc" />
<p:commandButton value="submit" process="#(form :not(.notIncluded))"
update=":aForm" />
</p:panelGrid>
</h:form>
I have checked your examples, if you review page source your will notice that p:panelGrid creates table with id. Little bit strange but jQuery selector doesnt access childs when table has an id. If I remove table Id then button works fine. So my solution was giving an id to panelGrid and using this id in selector. p:panelGrid will give same id to table but you need to make sure you add prependId="false" attribute into your h:form:
<h:form id="aForm" prependId="false">
<p:panelGrid columns="2" id="myGrid">
<p:inputText id="inc" styleClass="included" required="true" />
<p:message for="inc" />
<p:inputText id="notInc" styleClass="notIncluded" required="true" />
<p:message for="notInc" />
<p:commandButton value="submit" process="#(#myGrid :not(.notIncluded))"
update=":aForm" />
</p:panelGrid>
</h:form>