How to get selected items from p:selectManyCheckbox? - jsf

Question

I have a selectManyCheckbox which have a list of items shown, When ever I select an item I want a callback on my backing bean to be triggered and then get the value of the selected item for doing some filtering with this value. My problem is that I can't get the backing bean method to be executed. Have tried several ways, here's my code
1
<h:form class="block filter image-list-filter">
<div class="title-block"> FILTER </div>
<div class="content">
<ul class="filter-block">
<p:selectManyCheckbox id="vals" layout="grid"
valueChangeListener="#{bean.selectFilter}" onchange="submit();">
<p:ajax event="click" process="#form" update="#all"/>
<f:selectItems value="#{bean.options}" var="filter"
itemValue="#{filter.idFilter}" itemLabel="#{filter.descr}"
itemDescription="#{filter.image}"/>
</p:selectManyCheckbox>
</ul>
</div>
</h:form>
2
<p:selectManyCheckbox id="vals" layout="grid">
<p:ajax event="click" process="#form" update="#all"
listener="#{bean.selectFilter}" />
<f:selectItems value="#{bean.options}" var="filter"
itemValue="#{filter.idFilter}" itemLabel="#{filter.descr}"
itemDescription="#{filter.image}"/>
</p:selectManyCheckbox>
3
<p:selectManyCheckbox id="vals" layout="grid"
valueChangeListener="#{bean.selectFilter}">
<p:ajax event="click" process="#form" update="#all"/>
<f:selectItems value="#{bean.options}" var="filter"
itemValue="#{filter.idFilter}" itemLabel="#{filter.descr}"
itemDescription="#{filter.image}"/>
</p:selectManyCheckbox>
Backing Bean Method
public void selectFilter(ValueChangeEvent dege) {
Object[] selFilters = (Object[]) dege.getNewValue();
if (selFilters.length != 0) {
//Do stuff
}
}
The options attribute is an ArrayList of a particular object that stores the available values. Of course, this attribute has setter & getter. PF version is 5.0

Answer 1

There are a lot of things in your code that is done much differently than I would have done it, and this makes it difficult for me to determine exactly what is causing the problem. Instead, I will explain how I would have solved it:
Component:
<p:selectManyCheckbox id="vals" layout="grid" value="#{bean.selectedValue}">
<p:ajax listener="#{bean.selectFilter}" update="#all"/>
<f:selectItems value="#{bean.options}" var="filter"
itemValue="#{filter.idFilter}" itemLabel="#{filter.descr}"
itemDescription="#{filter.image}"/>
</p:selectManyCheckbox>
Bean:
private Object[] selectedValue;
public Object[] getSelectedValue(){
return selectedValue;
}
public void setSelectedValue(Object[] newValue){
selectedValue = newValue;
}
public void selectFilter(){
Object[] selFilters = getSelectedValue();
if (selFilters.length != 0) {
//Do stuff
}
}
As far as I know this is the standard way of doing things, submitting the values through the normal property setter and then interacting with it in a triggered method like selectFilter. I would also discourage the usage of update="#all" as this will refresh the entire page. Updating only the parts of the page that actually changes with something like update="#(.image-list)" will tend to give a better user experience.

Answer 2

For getting selected items use h:form tags!