I need to make a simple align using p:outputLabel and p:selectOneMenu like this basic example
But, it's just working when I using p:inputText.
I need something like this:
<p:panelGrid columns="2">
<h:outputLabel for="idName" value="* #{msg.select_name}: " required="true" />
<p:selectOneMenu id="idSName" value="#{manage.name}">
<f:selectItems value="#{manage.listNames}" />
</p:selectOneMenu>
<h:outputLabel for="idCountry" value="#{msg.select_country}: " required="true" />
<p:selectOneMenu id="idCountryCustomer" value="#{manage.countrySelected}">
<f:selectItems value="#{manage.listCountryCustomer}" />
</p:selectOneMenu>
</p:panelGrid>
On p:selectOneMenu you should apply vertical-align:middle:
<p:selectOneMenu id="idSName" value="#{manage.name}" style="vertical-align:middle;">
<f:selectItems value="#{manage.listNames}" />
</p:selectOneMenu>
You used for="idName" in your <h:outputLabel>, however the id of <p:selectOneMenu> is "idSName". The names have to match.
You may also try <p:outputLabel> instead of <h:outputLabel>.
Related
why cascadeSelect desables buttons ? if i use selectOneMenu it works well.
in this example i removed others columns to simplify:
<p:accordionPanel id="infoMF">
<p:tab id="mainInfo" title = "Equipment Information">
<p:dataTable id="mainInfoTab" var="ecnEquipment" value="#{main.equipment.templateEqpItems}" scrollable="true" scrollHeight="250" style="font-size:10px">
<p:column headerText="ConstructType" style="text-align:center;width:0.2rem;font-size:10px;">
<p:cascadeSelect styleClass="custom-filter" value="#{ecnEquipment.constructType}" >
<f:selectItems value="#{list.listConstructType}" />
<p:ajax event="itemSelect" process="#this"/>
</p:cascadeSelect>
</p:column>
</p:dataTable>
<p:toolbar>
<p:toolbarGroup >
<p:selectOneMenu
label="Choose an equipment for deleting"
value="#{main.eqpToRemove}"
immediate="true">
<f:selectItems value="#{main.listEqpExisting}" />
</p:selectOneMenu>
<p:commandButton id="delBtn" icon="pi pi-trash"
action="#{main.deleteEquipment}" process="#this mainInfo"
update="mainInfo" styleClass="ui-button-danger"/>
<p:tooltip value="Remove the selected equipment" for="delBtn" />
<p:tooltip value="add an equipment" for="addBtn" />
<p:tooltip value="select an equipment to remove" for="listToRemoveFrom" />
<p:tooltip value="select a type for the equipment to add" for="listTypeEquipment" />
</p:toolbarGroup>
</p:toolbar>
</p:tab>
</p:accordionPanel>
there is no error in consol. i'am using java 8
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?
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>
I successfully done using placeholder in inputText but i tried this in selectOneMenu can't able to get . instead of martial status in selectOneMenu i want to use placeholder
or atleast i want to change martial status color
<h:selectOneMenu value="">
<f:selectItem itemValue="0" itemLabel="Marital status"/>
<f:selectItem itemValue="1" itemLabel="Single"/>
<f:selectItem itemValue="2" itemLabel="married"/>
</h:selectOneMenu>
If I understood you right
JSF 1
<f:selectItem itemLabel="Select Something" itemValue="#{null}" />
JSF 2
<f:selectItem itemValue="Select Something" noSelectionOption="true" />