Using primefaces, how can I implement dropdown list, which immediately fulfills the action to go to the next page?
I have a dropdown list:
<p:selectOneMenu id="names" value="#{backing.name}">
<f:selectItem itemValue="1" itemLabel="Peter Jan" />
<f:selectItem itemValue="2" itemLabel="Tom Bert" />
<f:selectItem itemValue="3" itemLabel="Magda" />
</p:selectOneMenu>
And then press a button:
<h:commandButton action="detail" value="View Detail"/>
I want this in one action:
Select "name" from dropdown with immediate "button-pressed"
I think you can do it with p:ajax and a redirect like this:
<p:selectOneMenu id="names" value="#{backing.name}">
<f:selectItem itemValue="1" itemLabel="Peter Jan" />
<f:selectItem itemValue="2" itemLabel="Tom Bert" />
<f:selectItem itemValue="3" itemLabel="Magda" />
<p:ajax event="change" listener="#{testBean.goToDetail()}" />
</p:selectOneMenu>
and
public void goToDetail() {
try {
FacesContext.getCurrentInstance().getExternalContext().redirect("detail.xhtml?name=" + name);
} catch (IOException ex) {
// Handle error
}
}
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>
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" />
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>.