Suppose the code of this page:
<h:form prependId="false" id="form">
<h:selectManyCheckbox id="checkBoxList" value="#{backedBean.lstIdSelectedItems}" layout="pageDirection">
<f:selectItems value="#{backedBean.lstAvailableItems}" var="item" itemLabel="#{item.label}" itemValue="#{item.value}" />
<f:ajax listener="#{backedBean.itemClicked}" />
</h:selectManyCheckbox>
</h:form>
And the code of a session managed bean:
public class BackedBean implements Serializable {
private List<SelectItem> lstAvailableItems;
private List<Long> lstIdSelectedItems;
public BackedBean() {
lstAvailableItems = new ArrayList<SelectItem>();
lstIdSelectedItems = new ArrayList<Long>();
}
@PostConstruct
private void postConstruct(){
for (int i = 0; i < 10; i++) {
SelectItem item = new SelectItem(new Long(i), "CHKID " + i);
lstAvailableItems.add(item);
}
}
public void itemClicked(AjaxBehaviorEvent ae){
HtmlSelectManyCheckbox uiCmp = (HtmlSelectManyCheckbox)ae.getSource();
// (1) Here I would like to get the ID of the item that has been clicked.
}
In (1) I would like to get the ID of the element that has been clicked by the user. I can see in the lstIdSelectedItems array list the IDs of all elements selected by the user, but how can I get the ID of the element that the user has clicked?
I have tried to use the f:attribute tag inside of the selectManyCheckbox, but the attribute is not in the component map when the ajax listener method is called in the backed bean. I have used this, but doesn't work:
<h:selectManyCheckbox id="checkBoxList" value="#{backedBean.lstIdSelectedItems}" layout="pageDirection">
<f:selectItems value="#{backedBean.lstAvailableItems}" var="item" itemLabel="#{item.label}" itemValue="#{item.value}">
<f:attribute name="clicked" value="#{item.value}" />
</f:selectItems>
<f:ajax listener="#{backedBean.itemClicked}" />
</h:selectManyCheckbox>
Any ideas?
Regards.
Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience.
The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
ajax() (and various ajax shortcut methods) returns a jqXHR object, which is a superset of the browser's native XMLHttpRequest object and implements inter alia the Promise interface.
You're thus interested in the actual value change and not only in the new value. Bring in a valueChangeListener
which compares the old value with the new value and prepares some properties which the ajax listener method could intercept on.
E.g.
<h:selectManyCheckbox value="#{bean.selectedItems}" valueChangeListener="#{bean.selectedItemsChanged}" converter="javax.faces.Long">
<f:selectItems value="#{bean.availableItems}" />
<f:ajax listener="#{bean.itemSelected}" />
</h:selectManyCheckbox>
with
private Map<String, Long> availableItems; // +getter
private List<Long> selectedItems; // +getter+setter
private Long selectedItem;
private boolean selectedItemRemoved;
@PostConstruct
public void init() {
availableItems = new LinkedHashMap<String, Long>();
for (long i = 0; i < 10; i++) {
availableItems.put("CHKID " + i, i);
}
}
public void selectedItemsChanged(ValueChangeEvent event) {
List<Long> oldValue = (List<Long>) event.getOldValue();
List<Long> newValue = (List<Long>) event.getNewValue();
if (oldValue == null) {
oldValue = Collections.emptyList();
}
if (oldValue.size() > newValue.size()) {
oldValue = new ArrayList<Long>(oldValue);
oldValue.removeAll(newValue);
selectedItem = oldValue.iterator().next();
selectedItemRemoved = true;
}
else {
newValue = new ArrayList<Long>(newValue);
newValue.removeAll(oldValue);
selectedItem = newValue.iterator().next();
selectedItemRemoved = false;
}
}
public void itemSelected(AjaxBehaviorEvent event) {
System.out.println("Selected item: " + selectedItem);
System.out.println("Selected item removed? " + selectedItemRemoved);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With