When I click on my <p:selectOneMenu> the whole layout crashes. When I click outside the menu and then the menu itself again, always the layout changes. When I remove the <p:panel> the problem is gone. I see the problem is the <p:panel> in combination with the <h:panelGrid>.
How to avoid the behavior?
See my gif below!
Additional Information:
Primefaces 6.0
Primefaces "Omega" Theme
Here is my minimal code example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Test</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="1" style="width:100%;">
<h:panelGroup layout="block">
<p:panel header="panel">
<h:panelGrid columns="1" cellpadding="5">
<h:panelGrid id="wfSelectionGrid" columns="2" >
<h:outputText value="Category:" />
<p:selectOneButton >
<f:selectItem itemLabel="1" itemValue="1" />
<f:selectItem itemLabel="2" itemValue="2" />
<f:selectItem itemLabel="3" itemValue="3" />
</p:selectOneButton>
</h:panelGrid>
<h:panelGrid columns="4">
<p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" />
<p:selectOneMenu id="wfSelectionMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="AA" itemValue="AA" />
<f:selectItem itemLabel="BB" itemValue="BB" />
<f:selectItem itemLabel="CC" itemValue="CC" />
</p:selectOneMenu>
<p:commandButton id="defineXmlButton" value="to stuff" />
</h:panelGrid>
</h:panelGrid>
</p:panel>
</h:panelGroup>
</h:panelGrid>
</h:form>
</h:body>
</html>
Edit 1:
Broken down to less code, even the following sample leads to the problem:
<h:form>
<p:panel header="panel">
<h:panelGrid columns="2">
<p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" />
<p:selectOneMenu id="wfSelectionMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="AA" itemValue="AA" />
<f:selectItem itemLabel="BB" itemValue="BB" />
<f:selectItem itemLabel="CC" itemValue="CC" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</h:form>
Edit 2:
Adding colors makes it more visible which of the components change during the on click event. Now by using the attribute cellspacing and setting it to zero, the problem is gone. But is there another (better) solution?
<p:panel header="panel" style="background-color:blue;">
<h:panelGrid columns="2" style="background-color:red;" cellspacing="0" cellpadding="10">
<p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" style="background-color:green;" />
<p:selectOneMenu id="wfSelectionMenu" >
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="AA" itemValue="AA" />
<f:selectItem itemLabel="BB" itemValue="BB" />
<f:selectItem itemLabel="CC" itemValue="CC" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
Edit 3:
Using devtools - the interesting html component sizes are:
the <td> is 117*28 + 10 padding each side..
After the click its 115*28 + 10 padding each side.
Why is the component loosing those 2 px? It seems that every other component stays the same size.
Related
When I use p:selectOneMenu in p:dialog, selectOneMenu's panel is detached from selectOneMenu when scrolling. I found a few similar posts, but none of those solutions work:
p:selectOneMenu dropdown part scrolls and does not stay in position
p:selectOneMenu dropdown not attached to the component inside a dialog
SelectOneMenu panel scrolls with the mouse wheel
Basically all the proposed solutions use appendTo="#this", but it doesn't work in my case. I use PF 6.2.27.
Here's a part of my dialog:
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:portlet="http://java.sun.com/portlet_2_0"
xmlns:p="http://primefaces.org/ui">
<p:dialog id="dlgTest" widgetVar="dlgTestWidget" header="My dialog" closeOnEscape="true" modal="true" resizable="false"
width="1000" height="800">
<p:panelGrid id="pnlData" styleClass="common-panel-grid">
<p:row>
<p:column>
<p:fieldset legend="HEADER" toggleable="false">
<h:panelGrid id="pgUseCase" >
<p:row>
...
</p:row>
<p:row>
<p:column colspan="2">
<p:selectOneMenu id="somServices" value="#{bean.selectedService}" effect="none" disabled="#{not bean.serviceEnabled}"
converter="serviceConverter" appendTo="#this">
<f:selectItem itemLabel="" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems var="item" value="#{bean.serviceList}" itemLabel="#{item.name}" itemValue="#{item}" />
</p:selectOneMenu>
</p:column>
</p:row>
</h:panelGrid>
</p:fieldset>
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</ui:composition>
Does anyone have some other solution to this problem?
If I click on the add button (for example the "CreateCategory1" Id) to add one new product category I get the "Name field is required" validation message. This should open one dialog, where I can enter the new category name, nothing else. At this point I don't want to validate the main form, because I just want to add one new product category, which I will be using later. Why is the dialog opening validating the form? How can I avoid this?
Thank you very much!
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition >
<h:outputScript library="js" name="warning.js"/>
<h:form id="ProductEditForm" target="_blank">
<div class="ui-fluid">
<p:panelGrid columns="4" columnClasses="ui-grid-col-6,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank" >
<p:outputPanel style="height: 70px" >
<p:breadCrumb model="#{breadCrumb.productMenuModel}" style="background: inherit; border: none" />
<h2>#{productController.selected.name}</h2>
</p:outputPanel>
<p:commandButton style="height: 30px; background: #{userController.headerColor}" icon="ui-icon-check" oncomplete="javascript:saved=true" action="#{productController.update}" actionListener="#{breadCrumb.navigateProduct()}" update=":center,:growl" value="#{bundle.Save}" />
<p:commandButton style="height: 30px" icon="ui-icon-close" oncomplete="javascript:saved=true" action="#{productController.refreshSelected()}" actionListener="#{breadCrumb.navigateProduct()}" update=":center,:growl" value="#{bundle.Cancel}"/>
<p:commandButton style="height: 30px" icon="ui-icon-document" update="#([id$=ProductHistoryDateForm])" oncomplete="PF('ProuctHistoryDateDialog').show()" value="Print history" disabled="#{empty productController.selected}" />
</p:panelGrid>
<p:panelGrid columns="2" columnClasses="ui-grid-col-6,ui-grid-col-6" layout="grid" >
<p:panel>
<h3>Main info</h3>
<p:panelGrid columns="2" columnClasses="ui-grid-col-3,ui-grid-col-9" layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel value="#{bundle.EditProductLabel_name}" for="name" />
<p:inputText id="name" value="#{productController.selected.name}" title="#{bundle.EditProductTitle_name}" required="true" requiredMessage="#{bundle.EditProductRequiredMessage_name}"/>
<p:outputLabel value="#{bundle.EditProductLabel_originalName}"/>
<p:inputText id="originalName" value="#{productController.selected.originalName}"/>
<h:outputText value="#{bundle.ViewInventoryItemLabel_serialized}"/>
<p:selectBooleanCheckbox disabled="false" value="#{productController.selected.serialized}" />
<p:outputLabel value="#{bundle.EditProductLabel_ean}" for="ean" />
<p:inputText id="ean" value="#{productController.selected.ean}" title="#{bundle.EditProductTitle_ean}" />
<p:outputLabel value="#{bundle.EditProductLabel_itemNr}" for="itemNr" />
<p:inputText id="itemNr" value="#{productController.selected.itemNr}" title="#{bundle.EditProductTitle_itemNr}" />
...
</p:panelGrid>
<h3>Sales</h3>
<p:panelGrid columns="2" columnClasses="ui-grid-col-3,ui-grid-col-9" layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel for="defaultSupplier" value="#{bundle.EditProduct_defaultSupplier}"/>
<p:selectOneMenu id="defaultSupplier" filter="true" value="#{productController.selected.defSupplierPartner}" title="#{bundle.EditProduct_defaultSupplier}" effect="fold" editable="false">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{partnerController.items}"
var="partnerDataIdItem"
itemValue="#{partnerDataIdItem}"
itemLabel="#{partnerDataIdItem.name}"/>
</p:selectOneMenu>
<p:outputLabel value="#{bundle.EditProductLabel_purchaseDeliveryTime}" for="purchaseDeliveryTime" />
<p:inputText id="purchaseDeliveryTime" value="#{productController.selected.purchaseDeliveryTime}" title="#{bundle.EditProductTitle_purchaseDeliveryTime}" />
<p:outputLabel value="#{bundle.EditProductLabel_lastPurchase}" />
<p:inputText id="lastPurchase" value="#{productController.selected.lastPurchasePrice}" />
...
</p:panelGrid>
</p:panel>
<p:panel id ="productGroups">
<h3>Product categories</h3>
<p:panelGrid columns="3" columnClasses="ui-grid-col-1,ui-grid-col-1,ui-grid-col-11" layout="grid" styleClass="ui-panelgrid-blank">
<p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:commandButton id="DeleteCategory1" disabled="#{productController.selected.productCategoryId1 == null}" update="category1" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId1)}" icon="ui-icon-minus" />
<p:selectOneMenu id="category1" value="#{productController.selected.productCategoryId1}" label="#{productController.selected.productCategoryId1.name}" effect="fold">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(1)}"
var="item"
itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
</p:selectOneMenu>
<p:commandButton id="CreateCategory2" rendered="#{productController.selected.productCategoryId1 != null}" actionListener="#{productCategoryController.prepareCreate(2)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:commandButton id="DeleteCategory2" disabled="#{productController.selected.productCategoryId2 == null}" update="category2" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId2)}" icon="ui-icon-minus" />
<p:selectOneMenu id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="#{productController.selected.productCategoryId2.name}" value="#{productController.selected.productCategoryId2}" effect="fold">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(2)}"
var="item"
itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
</p:selectOneMenu>
<p:commandButton id="CreateCategory3" rendered="#{productController.selected.productCategoryId2 != null}" actionListener="#{productCategoryController.prepareCreate(3)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:commandButton id="DeleteCategory3" disabled="#{productController.selected.productCategoryId3 == null}" update="category3" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId3)}" icon="ui-icon-minus" />
<p:selectOneMenu id="category3" label="#{productController.selected.productCategoryId3.name}" rendered="#{productController.selected.productCategoryId2 != null}" value="#{productController.selected.productCategoryId3}" effect="fold">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(3)}"
var="item"
itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(3)}"/>
</p:selectOneMenu>
<p:commandButton id="CreateCategory4" rendered="#{productController.selected.productCategoryId3 != null}" actionListener="#{productCategoryController.prepareCreate(4)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:commandButton id="DeleteCategory4" disabled="#{productController.selected.productCategoryId4 == null}" update="category4" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId4)}" icon="ui-icon-minus" />
<p:selectOneMenu id="category4" label="#{productController.selected.productCategoryId4.name}" rendered="#{productController.selected.productCategoryId3 != null}" value="#{productController.selected.productCategoryId4}" effect="fold">
<f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(4)}"
var="item"
itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(4)}"/>
</p:selectOneMenu>
</p:panelGrid>
</p:panel>
</p:panelGrid>
</div>
</h:form>
</ui:composition>
</html>
This is NOT a direct answer but a long extensive comment on what is all wrong with this question and how the real problem could simply be narrowed down by making a [mcve]... with a simple answer at the end.
Remove the composition
Remove the h:outputScript
Remove all styling
Remove the structural divs panelGrid and more
Remove 'bundles' from label and make them static
Remove most inputs (leave one in so that it still demonstrates the problem)
Remove most buttons that open a dialog and leave one (the one you referred to) in so that it still demonstrates the problem
What it could look like then
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:form id="ProductEditForm" target="_blank">
<p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:selectOneMenu id="category1" value="#{productController.selected.productCategoryId1}" label="Category 1">
<f:selectItem itemLabel="Select one" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(1)}" var="item" itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
</p:selectOneMenu>
<p:selectOneMenu id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="Category 2" value="#{productController.selected.productCategoryId2}" effect="fold">
<f:selectItem itemLabel="Select one" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{productCategoryController.getItemsByLevel(2)}" var="item" itemLabel="#{item.name}"/>
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
</p:selectOneMenu>
</h:form>
</html>
You could even make it more simple by using plain p:inputText instead of p:selectOneMenus.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:form id="ProductEditForm" target="_blank">
<p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
<p:inputText id="category1" value="#{productController.selected.productCategoryId1}" label="Category 1">
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
</p:inputText>
<p:inputText id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="Category 2" value="#{productController.selected.productCategoryId2}">
<p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
</p:inputText>
</h:form>
</html>
And if the problem still occurs an h:inputText with f:ajax And even an h:commandButton with an f:ajax (changing the oncomplete to onevent) , making it less PrimeFaces dependend (and still causing an error).
But now we come to it... The oncomplete that opens the dialog... Is it actually related to opening the dialog? What if you'd use a simple oncomplete="alert('Hi there');" in the commandButton? Does it fail to? 100% sure it does, so your title
Opening dialog validates the main form what I don't want
and your question
"Why is the dialog opening validating the form?"
Are both wrong... What if you remove the oncomplete completely? Still fails? Yes... Hmmmm... So it is is just related to pressing a button. Well what does a button do? It submits a form... validating it... So effectively your question becomes
"How can I prevent a commandButton from submitting and validating my whole form"
And you could also have come here by starting to remove the oncomplete in the first place, by asking yourself the question related to the title:
"IS it related to opening the dialog? What If I don't open the dialog? Where do I do that? In the oncomplete, so what if I remove that").
If you posted your new question in a search engine and added 'PrimeFaces JSF site:stackoverflow.com' to it, you'd after some reading have found:
PrimeFaces disable validation on cancel button
Which is exactly like stated in the comment. Might not be sufficient (you might need to add some other id to the process attribute of fields you do want to submit with the specific button, but you'd have a more detailed to the point question then.
You could, of course also make more than one form, submitting smaller parts
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
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 would like to display a <p:panel> when selecting an item of <p:selectOneRadio>. It works when selecting for the first time, but after the ajax call it stops working.
<p:selectOneRadio id="console" value="#{myBean.membre}">
<f:selectItem itemLabel="a" itemValue="false" />
<f:selectItem itemLabel="b" itemValue="true" />
<p:ajax update="panel2,panel1" />
</p:selectOneRadio>
<p:panel id="panel1" visible="#{myBean.membre == false}"
closable="true" toggleable="true">
<ui:include src="a.xhtml" />
</p:panel>
<p:panel id="panel2" visible="#{myBean.membre == true}"
closable="true" toggleable="true">
<ui:include src="b.xhtml" />
</p:panel>
On PrimeFaces 4.0, I had to remove the closable attributes from the panels before I could toggle the visibility. I also added a form which is always required when working with form fields.
Here is my working solution:
<h:form id="testForm">
<p:selectOneRadio id="console" value="#{myBean.membre}">
<f:selectItem itemLabel="a" itemValue="false" />
<f:selectItem itemLabel="b" itemValue="true" />
<p:ajax update="panel2,panel1" />
</p:selectOneRadio>
<p:panel id="panel1" visible="#{not myBean.membre}" toggleable="true">
test 111
</p:panel>
<p:panel id="panel2" visible="#myBean.membre}" toggleable="true">
test 222
</p:panel>
</h:form>
Why the closable attribute conflicts with the visible attribute I don 't know. It is possible a bug or unplanned for combination.
Trying to use a pair of radio buttons to hide and display different select one menu but it doesn't seem to be getting anywhere. The issue is if i set the default one in the bean from true to false, it would not change even if i change the radio button to the other option.Should I be using something else for JSF besides render? The end result is depending on the radio-button being checked you will see a different set of select one menu options being displayed.
JSF Page with the Section being described.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:form id="form">
<h3>
<b>Test Origin: </b>
<h:selectOneRadio required="true" value="#{engTaskFormBean.testOrigin}">
<f:selectItem itemValue="#{true}" itemLabel="Qualification" />
<f:selectItem itemValue="#{false}" itemLabel="Experimental" />
<f:ajax execute="#this" render="output" />
</h:selectOneRadio>
<br /> <br />
<h:panelGroup id="output">
<b>Priority Category: </b>
<h:selectOneMenu value="#{engTaskFormBean.priorityCatValue}"
rendered="#{engTaskFormBean.testOrigin}">
<f:selectItem itemValue="End Of Life" itemLabel="End Of Life" />
<f:selectItem itemValue="New Design" itemLabel="New Design" />
<f:selectItem itemValue="2nd Source" itemLabel="2nd Source" />
<f:selectItem itemValue="Suitable Sub." itemLabel="Suitable Sub." />
</h:selectOneMenu>
<br />
<br />
<h:selectOneMenu value="#{engTaskFormBean.priorityCatValue}"
rendered="#{!engTaskFormBean.testOrigin}">
<f:selectItem itemValue="Customer Inquiry" itemLabel="Customer Inquiry" />
<f:selectItem itemValue="Internal" itemLabel="Internal" />
</h:selectOneMenu>
<br />
<br />
</h:panelGroup>
</h3>
</h:form>
</html>
JSF Bean
private boolean testOrigin;
public boolean isTestOrigin() {
return testOrigin;
}
public void setTestOrigin(boolean testOrigin) {
this.testOrigin = testOrigin;
}
Your 1st drop-down list should look like this:
<h:selectOneRadio required="true" value="#{engTaskFormBean.testOrigin}">
<f:selectItem itemValue="#{true}" itemLabel="Qualification" />
<f:selectItem itemValue="#{false}" itemLabel="Experimental" />
<f:ajax execute="#this" render="output" />
</h:selectOneRadio>
Your initial true and false is text, not boolean. Then, in the output section, use the following: rendered="#{engTaskFormBean.testOrigin}"
The problem i was getting was the didn't seem to be working , the workaround I used was with primefaces.
all together the code is
<b>Test Origin: </b>
<h:selectOneRadio required="true" value="#{engTaskFormBean.testOrigin}">
<f:selectItem itemValue="#{true}" itemLabel="Qualification" />
<f:selectItem itemValue="#{false}" itemLabel="Experimental" />
<p:ajax process="#this" update=":form:output"/>
</h:selectOneRadio>
<br /> <br />
<h:panelGroup id="output">
<center>
<b>Priority Category: </b>
<h:selectOneMenu value="#{engTaskFormBean.priorityCatValue}"
rendered="#{engTaskFormBean.testOrigin}">
<f:selectItem itemValue="End Of Life" itemLabel="End Of Life" />
<f:selectItem itemValue="New Design" itemLabel="New Design" />
<f:selectItem itemValue="2nd Source" itemLabel="2nd Source" />
<f:selectItem itemValue="Suitable Sub." itemLabel="Suitable Sub." />
</h:selectOneMenu>
<br />
<br />
<h:selectOneMenu value="#{engTaskFormBean.priorityCatValue}"
rendered="#{!engTaskFormBean.testOrigin}">
<f:selectItem itemValue="Customer Inquiry" itemLabel="Customer Inquiry" />
<f:selectItem itemValue="Internal" itemLabel="Internal" />
</h:selectOneMenu>
<br />
<br />
</center>
</h:panelGroup>