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>
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'm using primefaces and have a datatable that has 2 columns. One column is outputtext another one is selectOneMenu. I made editable selectOneMenu. Actually it's work but not properly. Default value of selectItem is shown null but ı want it to show first value as default value. How can I make it?
<p:dataTable id="cellEditingTable" var="message"
value="#{messageTableController.menuList}" paginator="true"
paginatorPosition="bottom" editable="true" editMode="cell">
<p:column>
<p:selectOneMenu id="menu" value="#{messageTableController.selected}"
style="width:96%" effect="fold" editable="true">
<f:selectItem itemLabel="#{message.assign}"
itemValue="#{message.assign}" />
<f:selectItem itemLabel="#{message.combo}"
itemValue="#{message.combo}" />
</p:selectOneMenu>
</p:column>
</p:dataTable>
I change selectOneMenu's value to first ItemValue. So when run the program, first ItemValue picked selected item as a default.
<p:selectOneMenu id="menu" value="#{message.assign}"
style="width:97%" editable="true">
<f:selectItem itemLabel="#{message.assign}"
itemValue="#{message.assign}" />
<f:selectItem itemLabel="#{message.combo}"
itemValue="#{message.combo}" />
</p:selectOneMenu>
Add noSelectionOption to the first selectItem
<f:selectItem itemLabel="#{message.assign}"
itemValue="#{message.assign}" noSelectionOption="true" />
May be late to answer this.
If you use editable="true" then while rendering in the browse, it will render as textbox.
Remove the editable="true" then the default value will be selected.
If you want to provide the filter option in the selectOneMenu, use filter="true"
<p:selectOneMenu id="menu" value="#{message.assign}"
style="width:97%" filter="true">
<f:selectItem itemLabel="#{message.assign}"
itemValue="#{message.assign}" />
<f:selectItem itemLabel="#{message.combo}"
itemValue="#{message.combo}" />
</p:selectOneMenu>
Based on the editable property, it will render in browser as below.
I'm having a trouble with getting rid of required message.
I have a form in which I have a few fields and a button.
When I press a button there is validation that checks if required fields where filled with values if not then required message is displayed for invalid value/component.
Now I want to select a value from selectOneMenu or type something into inputText and when I do that I want the required message to dissapear without need to press the button again.
How would you do that?
I've tried to remove message with sth like this, but it doesn't seems to work:
Iterator<FacesMessage> msgIterator = FacesContext.getCurrentInstance().getMessages();
while (msgIterator.hasNext())
{
FacesMessage facesMessage = msgIterator.next();
msgIterator.remove();
}
Could you help me with that?
Here is example code:
<h:form id="mainForm">
<h:selectOneMenu required="true" id="dictionaryValueId" value="#{SomeBean.dictionarySelectedValue}">
<f:selectItem itemValue="#{null}" itemLabel="#{i18n['view.choose']}" />
<f:selectItems value="#{SomeBeanBean.dictionaryValuesMap}" var="element"
itemLabel="#{element.descripption}" itemValue="#{element.key}" />
<f:ajax event="change" execute="#this msgId" render="msgId dictionaryValueId"/>
</h:selectOneMenu>
<h:message id="msgId" style="display:none;" for="dictionaryValueId" />
...
<h:commandButton value="#{i18n['button.forward.name']}"
actionListener="#{SomeBean.forward}" >
<p:ajax process="#form" update="mainForm"/>
</h:commandButton>
I am not sure, but is not there a problem with
style="display:none;"
for
<h:message id="msgId"/>
You can wrap your message with <h:panelGroup/> and render by this panelGroup Id, this Id will be always present on your form.
<h:form id="mainForm">
<h:selectOneMenu required="true" id="dictionaryValueId" value="#{SomeBean.dictionarySelectedValue}">
<f:selectItem itemValue="#{null}" itemLabel="#{i18n['view.choose']}" />
<f:selectItems value="#{SomeBeanBean.dictionaryValuesMap}" var="element" itemLabel="#{element.descripption}" itemValue="#{element.key}" />
<f:ajax event="change" execute="#this" render="messageBundle1 dictionaryValueId"/>
</h:selectOneMenu>
<h:panelGroup id="messageBundle1">
<h:message id="msgId" style="display:none;" for="dictionaryValueId" />
</h:panelGroup>
<h:commandButton value="#{i18n['button.forward.name']}"
actionListener="#{SomeBean.forward}" >
<p:ajax process="#form" update="mainForm"/>
</h:commandButton>
</h:form>
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
I am having a drop down menu, on selecting a particular value from a drop down menu, i have to show a datatable corresponding to it and on selecting second from drop down menu ,value the previous data table should hide and the datatable corresponding to second value should populate and so on
here are my codes:
<h:selectOneMenu value="#{bean.value}"
styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all"
style="width:100px;">
<f:selectItem itemLabel="Select" itemValue="Select" />
<f:selectItem itemLabel="5" itemValue="5" id="mySelectedValue1" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="6" itemValue="6" id="mySelectedValue2" onclick="hideOrShow(??);"/>
<f:selectItem itemLabel="7" itemValue="7" id="mySelectedValue3" onclick="hideOrShow(??);"/>
</h:selectOneMenu>
<script type="text/javascript">
function hideOrShow(show) {
var obj = document.getElementById("myForm:myPanel");
if (show) {
obj.style.display = "block";
}
else {
obj.style.display = "none";
}
} </script>
<h:panelGrid id="myPanel" columns="2">
...
</h:panelGrid>
My Question is what to put as parameters in HideOrShow() shown as ?? so that java script function will identify it. And how initially all the datatables will be hidden?
thanks: curious
Using plain JS in combination with JSF is often recipe for trouble and unintuitiveness because of the way how JSF state management works. You should prefer solving the problem using pure JSF. It will also often end up in a simpler view. You can use the JSF-provided <f:ajax> for this particular purpose in combination with the rendered attribute on the components to show/hide.
Kickoff example:
<h:form>
<h:selectOneMenu value="#{bean.value}">
<f:selectItem itemLabel="Select" itemValue="#{null}" />
<f:selectItem itemLabel="5" itemValue="5" />
<f:selectItem itemLabel="6" itemValue="6" />
<f:selectItem itemLabel="7" itemValue="7" />
<f:ajax render="tables" />
</h:selectOneMenu>
<h:panelGroup id="tables">
<h:dataTable value="#{bean.list5}" rendered="#{bean.value == 5}">
...
</h:dataTable>
<h:dataTable value="#{bean.list6}" rendered="#{bean.value == 6}">
...
</h:dataTable>
<h:dataTable value="#{bean.list7}" rendered="#{bean.value == 7}">
...
</h:dataTable>
</h:panelGroup>
</h:form>
Make sure that the bean is in the view scope whenever the tables contain by itself input components.