Question

Im using JQuery to move the elements (to & fro) between 2 select many list box. Here follows my JQuery code for the same.

<script type="text/javascript">

$(document).ready(function() {
    alert('inside function');
    $('#testForm\\:button_add').click(function(e) {
    var selectedOpts = $("#testForm\\:select_from option:selected");
    if (selectedOpts.length == 0) {
    alert("Nothing to move.");
    e.preventDefault();
    }
    $('#testForm\\:select_to').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
    });
    $('#testForm\\:button_remove').click(function(e) {
    var selectedOpts = $("#testForm\\:select_to option:selected");
    if (selectedOpts.length == 0) {
    alert("Nothing to move.");
    e.preventDefault();
    }                                               
    $('#testForm\\:select_from').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
    });
    });

</script>

And here follows my JSF code:

<td width="40%">
    <h:selectManyListbox value="#{testListBox.selectManyOptions}" id="select_from" size="5" >

    <f:selectItems value="#{testListBox.selectedOptions}" />
</h:selectManyListbox>
</td>
<td></td>
<td width="40%">
    <h:commandButton value="To" id="button_add"/><br/>
    <h:commandButton value="From" id="button_remove"/>
</td>
<td></td>
<td>
    <h:selectManyListbox id="select_to" size="5"
                        value="#{testListBox.selectedItems}">
    <f:selectItems />
</h:selectManyListbox>
</td> 
<td></td>

And in the page bean I’ve declared correcponding binding variables as below with respective getters/setters.

private Map<String, Object> selectedOptions;
private Map<String, Object> selectManyOptions;

private List<SelectItem> selectItems = new ArrayList<SelectItem>();
private List<String> selectedItems;

Now Im getting below error while Im submitting my page.
“Target model Type is no a Collection or Array”
Can any one suggest as it is blocking my navigation?
– Vamsi

Answer 1

Your concrete problem is caused because you’re using Map instead of Collection or Object[] as value of <h:selectManyListbox>. That component doesn’t support a Map as value.

If you replace

private Map<String, Object> selectedOptions;
private Map<String, Object> selectManyOptions;

by

private List<String> selectedOptions;
private List<String> selectManyOptions;

(or String[])

then this particular problem should disappear.

---

Unrelated to the concrete problem, after you’ve fixed this problem, you’ll undoubtely face a new problem. To save yourself from the effort asking another question again, here is then the answer: How to create a picklist in JSF? Tried moving items using JS/jQuery, but submit errors with "Validation Error: Value is not valid"