I would like to display p:inputText next to f:selectItem and get result like on picture below:
With my code:
<p:selectManyCheckbox id="s1" value="#{myBean.selectedValues}" layout="pageDirection" >
<f:selectItem itemLabel="value 1" itemValue="v1" />
<f:selectItem itemLabel="value 2" itemValue="v2" />
<f:selectItem itemLabel="value 3" itemValue="v3" />
<p:inputText id="input1" value="#{myBean.input1Value}" />
</p:selectManyCheckbox>
inputText has been displayed before selectItems:
I have tried also put inputText into selectItem tag, but result was the same.
<f:selectItem itemLabel="value 3" itemValue="v3">
<p:inputText id="input1" value="#{myBean.input1Value}" />
</f:selectItem>
The simplest way is to use p:panelGrid with columns="2"
<p:panelGrid columns="2">
<p:selectManyCheckbox....
</p:selectManyCheckbox>
<p:inputText id="input1" value="#{myBean.input1Value}" />
</p:panelGrid>
Take a look at other examples Primefaces PanelGrid
Related
I have a select and I want that when the user doesn't select anything it prints an error. So I use validator and my xhtml code is:
<p:selectOneMenu id="students"
value="#{studentsBean.selectedStudent}"
converter="studentsConverter" effect="fold">
<f:selectItem itemLabel="Select..." itemValue="" />
<f:selectItems value="#{studentsBean.studentsList}"
var="student" itemValue="#{student}"
itemLabel="#{student.name}" />
<p:ajax event="change" update="students" process="#this" />
<f:validator validatorId="studentNotNull" />
<f:ajax execute="#this" render="studentPanel"/>
</p:selectOneMenu>
<h:panelGroup id="studentPane">
<h:message for="students" style="color:red" />
</h:panelGroup>
The problem is that if I don't select anythin it print me "The students is not selected" while I choice an student the label it doesn't disappear.
the validatior works and I don't think I must write the code.
Anyone can help?
Can you try this
<p:selectOneMenu id="students"
value="#{studentsBean.selectedStudent}"
converter="studentsConverter" effect="fold"
required="true" requiredMessage="Student is required">
<f:selectItem itemLabel="Select..." noSelectionOption="true"/>
<f:selectItems value="#{studentsBean.studentsList}"
var="student"
itemValue="#{student}"
itemLabel="#{student.name}" />
</p:selectOneMenu>
Add in your form
<p:growl id="msgs" showDetail="true" life="3000"/>
and of course, update msgs in form submit
I have the following code:
<h:form id="mainForm">
<p:panelGrid columns="2" layout="grid">
<h:panelGroup styleClass="containers" layout="block">
<p:outputLabel for="document" value="Document" />
<p:inputText id="document"
value="#{dIGRCController.digrc.documento}" readonly="true" />
<h:link styleClass="searchLink" value="Search Documents"
outcome="searchDigrc.xhtml"></h:link>
<!-- #{dIGRCController.digrc.impresn == 'S'} -->
<p:outputLabel for="concept" value="Concept" />
<p:selectOneMenu id="concept"
value="#{dIGRCController.digrc.qconce}"
requiredMessage="You must select a Concept" required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItems
value="#{cCRX1Controller.ccrx1.concepts.entrySet()}"
var="concept" itemValue="#{concept.key}"
itemLabel="#{concept.value.tbdesc}" />
<p:ajax listener="#{dIGRCController.setDropDownSelectedCcrx1}"
update="hiddenSections, searchAgentsLink, agenteName, documentValue, containerDocQty, containerMethodPayment" />
</p:selectOneMenu>
<p:outputLabel for="todaysDate" value="Date" />
<p:inputText id="todaysDate" readonly="true"
value="#{dIGRCController.digrc.fecha}" />
</h:panelGroup>
<h:panelGroup styleClass="containers" layout="block">
<h:panelGroup>
<p:outputLabel for="agenteName" value="Agent Name" />
<p:inputText id="agenteName"
readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
value="#{dIGRCController.digrc.nombre}" required="true"
requiredMessage="You must enter an Agent Name" />
<h:panelGroup id="searchAgentsLink">
<h:link styleClass="searchLink" value="Search Agents"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
outcome="searchAgex1">
<f:param name="concept" value="#{dIGRCController.digrc.qconce}" />
<c:if test="#{not empty dIGRCController.digrc.documento}">
<f:param name="documento"
value="#{dIGRCController.digrc.documento}" />
</c:if>
</h:link>
</h:panelGroup>
</h:panelGroup>
<p:outputLabel for="documentValue" value="Document Value" />
<p:inputText id="documentValue"
value="#{dIGRCController.digrc.documVal}" required="true"
requiredMessage="You must enter a Document Value"
validatorMessage="The Document Value must be greater than 0"
readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 9 or
dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1 or
dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'F'}">
<f:validateDoubleRange minimum="0.01" />
<p:ajax event="change" update="containerIdTwo"></p:ajax>
</p:inputText>
<h:panelGroup styleClass="containers" layout="block"
id="containerDocQty">
<h:panelGroup
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.pideqtysn == 'S'}">
<p:outputLabel for="documentQuantity" value="Document Quantity" />
<p:inputText id="documentQuantity"
value="#{dIGRCController.digrc.qtyDoc}" required="true"
requiredMessage="You must enter a Document Quantity" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:panelGrid>
<p:panelGrid columns="1" layout="grid" id="hiddenSections">
<h:panelGroup styleClass="containers" layout="grid" id="moneyOrder"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1}">
<h2>Money Orders</h2>
<p:outputLabel for="moneyOrdersQty" value="Quantity" />
<p:inputText id="moneyOrdersQty"
value="#{dIGRCController.digrc.moqty}" />
<p:outputLabel for="moneyOrdersVal" value="Value" />
<p:inputText id="moneyOrdersVal"
value="#{dIGRCController.digrc.moval}">
<p:ajax update="documentValue" event="change"
listener="#{dIGRCController.setDocValueToMoneyOrderValue()}" />
</p:inputText>
</h:panelGroup>
<h:panelGroup styleClass="containers" layout="block"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 8}">
<h2>Transfer Documents</h2>
<p:outputLabel for="numeroConduce" value="Transfer Number" />
<p:inputText id="numeroConduce"
value="#{dIGRCController.digrc.notransf}" required="true"
requiredMessage="You must enter a Number." />
<p:outputLabel for="suplidor" value="Supplier" />
<p:inputText id="suplidor" value="#{dIGRCController.digrc.c8supli}"
required="true" requiredMessage="You must enter a Supplier" />
<p:outputLabel for="tipoEnvio" value="Type of Transfer" />
<p:selectOneMenu id="tipoEnvio"
value="#{dIGRCController.digrc.c8tpenvio}"
requiredMessage="You must select a Type of Transfer"
required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItem itemLabel="Regular" itemValue="R" />
<f:selectItem itemLabel="Official" itemValue="O" />
<f:selectItem itemLabel="Express Regular" itemValue="E" />
<f:selectItem itemLabel="Express Official" itemValue="F" />
<p:ajax event="change" update="containerExtraEnvio"></p:ajax>
</p:selectOneMenu>
<p:outputLabel for="envioDestino" value="Destination" />
<p:selectOneMenu id="envioDestino"
value="#{dIGRCController.digrc.c8destino}"
requiredMessage="You must select a Destination" required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItem itemLabel="Capital" itemValue="C" />
<f:selectItem itemLabel="Interior" itemValue="I" />
</p:selectOneMenu>
<h:panelGroup id="containerExtraEnvio">
<h:panelGroup
rendered="#{dIGRCController.digrc.c8tpenvio == 'O' or dIGRCController.digrc.c8tpenvio == 'F'}">
<p:outputLabel for="envioAdicionales" value="Extra" />
<p:inputText id="envioAdicionales"
value="#{dIGRCController.digrc.c8qadi}" required="true"
requiredMessage="You must enter an Extra" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:panelGrid>
</h:form>
Inside the first panelGrid, there is an drop down with ID concept. When an item is selected, this will update the container with ID hiddenSections. If the concept selected is 1, then it should show Money Orders. If the concept is 8, it should show Transfer Documents (see the panelGrid with id hiddenSections).
The image below shows the seven DIV elements that are empty inside. For code clarity, I am only showing two of them (If you wanted to, you should be able to reproduce with two).
Those seven DIV elements represent seven panelGroups that are rendered given the conditions I explained above. When the user first gets to the screen, none of them are rendered because the concept is not yet set. In this case, I see empty spaces which I don't want. How do I get rid of those empty spaces?
In this case, I see empty spaces which I don't want. How do I get rid of those empty spaces?
Your question is vague and I understood it 3 ways ( excuse me if I misunderstood as the answers seems obvious in all cases ).
When a component is not rendered, it doesn't figure in the html at all. So if by empty space you meant space characters then those are outside the tags in question.
If the table generated takes space because of css you want that part to be empty at page load then you can use rendered for that.
I think that one is what you were asking: Since your selectItem is initially null, none of the panelGroup out of the 8 are rendered and you'd like a default one to be rendered when the selected item is at null. Then just include a check to see if the value is empty for your default panelGroup.
Sorry if I misunderstood the question.
I want to display and hide a <h:panelGrid> on the basis of the value selected in <h:selectOneMenu>.
The code is:
<p:dialog id="logClassDlg" header="Log Class Teached" widgetVar="logClass" modal="true" >
<h:form>
<p:growl id="growl" showDetail="true" />
<h:panelGrid id="logClassPanelGrd1" columns="2">
<h:outputLabel for="class" value="Class: " />
<h:selectOneMenu id="class" value="#{logClassBean.classLog.classTitle}">
<f:selectItem itemValue="Reading" itemLabel="Reading" />
<f:selectItem itemValue="Memorization" itemLabel="Memorization" />
<f:selectItem itemValue="Translation" itemLabel="Translation" />
<f:selectItem itemValue="Language" itemLabel="Language" />
<f:selectItem itemValue="Grammer" itemLabel="Grammer" />
<f:ajax render="logClassPanelGrdBook" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGrid id="logClassPanelGrdBook" columns="2" rendered="#{(logClassBean.classLog.classTitle ne 'Language') and (logClassBean.classLog.classTitle ne 'Grammar')}">
<p:outputLabel value="Book" />
<h:selectOneMenu id="book" value="#{logClassBean.classLog.classStatus}">
<f:selectItem itemValue="first" itemLabel="first" />
<f:selectItem itemValue="second" itemLabel="second" />
<f:selectItem itemValue="third" itemLabel="third" />
<f:selectItem itemValue="fourth" itemLabel="fourth" />
<f:selectItem itemValue="fifth" itemLabel="fifth" />
</h:selectOneMenu>
</h:panelGrid>
As you can see I want to display the panel grid logClassPanelGrdBook only on when the selected values are not Language and Grammar i.e
rendered="#{(logClassBean.classLog.classTitle ne 'Language') and (logClassBean.classLog.classTitle ne 'Grammar')}"
But the panel grid is displayed irrespective of the values selected, it should hide when the other values (Reading, Memorization and Translation) are selected.
Any help/pointers would be appreciated. Thank you.
The part <f:ajax render="logClassPanelGrdBook" /> won't update and recheck the rendered function of the panelGrid this way. You will need to update its parent element instead.
For example, you can wrap it with <h:panelGroup>:
<h:panelGrid id="logClassPanelGrd1" columns="2">
<h:outputLabel for="class" value="Class: " />
<h:selectOneMenu id="class" value="#{logClassBean.classLog.classTitle}">
<f:selectItem itemValue="Reading" itemLabel="Reading" />
<f:selectItem itemValue="Memorization" itemLabel="Memorization" />
<f:selectItem itemValue="Translation" itemLabel="Translation" />
<f:selectItem itemValue="Language" itemLabel="Language" />
<f:selectItem itemValue="Grammar" itemLabel="Grammar" />
<f:ajax render="logClassPanelGrdBook" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGroup id="logClassPanelGrdBook">
<h:panelGrid columns="2" rendered="#{(logClassBean.classLog.classTitle ne 'Language') and (logClassBean.classLog.classTitle ne 'Grammar')}">
<p:outputLabel value="Book" />
<h:selectOneMenu id="book" value="#{logClassBean.classLog.classStatus}">
<f:selectItem itemValue="first" itemLabel="first" />
<f:selectItem itemValue="second" itemLabel="second" />
<f:selectItem itemValue="third" itemLabel="third" />
<f:selectItem itemValue="fourth" itemLabel="fourth" />
<f:selectItem itemValue="fifth" itemLabel="fifth" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGroup>
I also changed select item value from Grammer to Grammar because it didn't match the value in rendered attribute.
If this doesn't work, you should also check if bean value is properly set when you click <h:selectOneMenu>.
I have a drop down list with several values and I want to show a panel only if a value has been selected
Here is the code simplified
<p:selectOneMenu id="" value="#{myBean.myElement}" >
<f:selectItem itemLabel="Choose an element itemValue="" />
<f:selectItems value="#{myBean.myElementList}" />
<p:ajax update="myPanel" listener="#{myBean.handleChange}"/>
</p:selectOneMenu>
<p:panel id="myPanel" header="My Header" style="margin-bottom:10px;" rendered="#{myBean.myElement != null}">
But this does not seem to work (it works only if I refresh manually the page).
How could you fix this ?
Since myPanel is not rendered, the component won't be in the component tree, so it cannot be updated later in the view. Use another UIContainer to wrap it like <h:panelGroup> and update this container:
<p:selectOneMenu id="" value="#{myBean.myElement}" >
<f:selectItem itemLabel="Choose an element itemValue="" />
<f:selectItems value="#{myBean.myElementList}" />
<!-- here update to foo instead of myPanel -->
<p:ajax update="foo" listener="#{myBean.handleChange}"/>
</p:selectOneMenu>
<h:panelGroup id="foo">
<p:panel id="myPanel" header="My Header" style="margin-bottom:10px;"
rendered="#{myBean.myElement != null}">
</h:panelGroup>
I have two checkboxes.
<h:panelGrid id="userActivationGridcheckbox">
<p:selectManyCheckbox value="#{user.activationModecheckbox}" layout="pageDirection">
<f:selectItem itemLabel="Account Expiration(in days)" itemValue="byEmailcheckbox" />
<f:selectItem itemLabel="Reset User Password" itemValue="byAdmincheckbox" />
<f:ajax event="change" render="userActivationGridcheckbox" />
</p:selectManyCheckbox>
<h:panelGrid id="manualActivationGridcheckbox" rendered="#{user.manualActivationcheckbox}" columns="2">
<p:selectOneRadio value="#{user.activationModecheckbox}" layout="pageDirection">
<f:selectItem itemLabel="label1" itemValue="value1" />
<f:selectItem itemLabel="label2" itemValue="value2" />
<h:outputLabel>label</h:outputLabel>
<h:inputText value="" />
</p:selectOneRadio>
</h:panelGrid>
</h:panelGrid>
When the first checkbox is checked, then 2 more radio buttons should show up. When the second checkbox is not checked, then the radio buttons should not show up. How can I achieve this?
You need to decide in some listener method whether or not to show the radio group to the user, for example, by keeping a boolean in a backing bean. Then just render the component via AJAX.
Example usage:
The view:
<h:form>
<p:selectManyCheckbox id="check" value="#{bean.options}">
<p:ajax process="#this" update="radio" listener="#{bean.listener}" />
<f:selectItem itemLabel="Option 1" itemValue="Option 1" />
<f:selectItem itemLabel="Option 2" itemValue="Option 2" />
</p:selectManyCheckbox>
<h:panelGroup id="radio" layout="block">
<h:panelGrid rendered="#{bean.needsSuboptions}" columns="2">
<p:selectOneRadio value="#{bean.suboption1}" layout="pageDirection" >
<f:selectItem itemLabel="Select ---" itemValue="" />
<f:selectItem itemLabel="Suboption 1-1" itemValue="Suboption 1-1" />
<f:selectItem itemLabel="Suboption 1-2" itemValue="Suboption 1-2" />
</p:selectOneRadio>
<p:selectOneRadio value="#{bean.suboption2}" layout="pageDirection" >
<f:selectItem itemLabel="Select ---" itemValue="" />
<f:selectItem itemLabel="Suboption 2-1" itemValue="Suboption 2-1" />
<f:selectItem itemLabel="Suboption 2-2" itemValue="Suboption 2-2" />
</p:selectOneRadio>
</h:panelGrid>
</h:panelGroup>
</h:form>
And the bean:
List<String> options;//getter+setter
String suboption1;//getter+setter
String suboption2;//getter+setter
boolean needsSuboptions = false;//getter
public void listener() {
needsSuboptions = options.contains("Option 1");
}
You can also do with f:ajax as the code that skuntsel provided.
<f:ajax render="" execute="" listener=""/>
maps to:
<p:ajax update="" process="" listener=""/>
<p:selectManyCheckbox id="check" value="#{displayPanel.options}">
<f:ajax event="change" render="radio" listener="#{displayPanel.listener}" />
<f:selectItem itemLabel="Option 1" itemValue="Option 1" />
<f:selectItem itemLabel="Option 2" itemValue="Option 2" />
</p:selectManyCheckbox>
<h:panelGroup id="radio" layout="block">
<h:panelGrid rendered="#{displayPanel.n}" columns="2">
<p:selectOneRadio value="#{displayPanel.a}" layout="pageDirection">
<f:selectItem itemLabel="Select ---" itemValue="" />
<f:selectItem itemLabel="Suboption 1-1" itemValue="Suboption 1-1" />
<f:selectItem itemLabel="Suboption 1-2" itemValue="Suboption 1-2" />
</p:selectOneRadio>
<p:selectOneRadio value="#{displayPanel.b}" layout="pageDirection">
<f:selectItem itemLabel="Select ---" itemValue="" />
<f:selectItem itemLabel="Suboption 2-1" itemValue="Suboption 2-1" />
<f:selectItem itemLabel="Suboption 2-2" itemValue="Suboption 2-2" />
</p:selectOneRadio>
</h:panelGrid>
you forgot the provide listener for f:ajax.