Target model Type is no a Collection or Array

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

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

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"

edited May 23 '17 at 12:18

Community

1
1

answered Oct 17 '12 at 01:46

BalusC

1,082,665
372
3,610
3,555

Thanks balu. Your code was working. I just need to do few amendments for my requirements though. But are you really saying the values which are being set by JQury/java script (i understand it will run at CLIENT SIDE) can't be handled by JSF? Can it be handled by hidden variables by any chance? Also will STATE_SAVING_METHOD property to CLIENT help us in this case (might be a dumb question) to let JSF know about values set by JQuery? – MyFist Oct 18 '12 at 02:44
Agreed thanks for your prompt reply. One last doubt. I will make answer as accepted after this :-) In such case, is there any other way exists with out using hidden variables so taht JSF can read the values which are set by JQuery/java script? – MyFist Oct 18 '12 at 06:13
No. You've got to keep the JSF state in sync *somehow*. The only way of transferring data from client to server is as HTTP request parameters. You can do that the easy way with standard JSF components whose values are by EL directly bound to bean properties, or the clumsy way with JavaScript and hidden inputs and manually gathering them. – BalusC Oct 18 '12 at 10:30
hi balu...initially i thought your code was working but in fact it is not. leftSelected items are moving from left to right and it is getting added rightAvailable and display also proper. But after to this, when I tried to click on 'right To Left' then I can see rightAvailable is having null value and in fact ALL the items are getting added to leftAvailable instead of rightSelected items. As I said above, 'left to right' is working fine. Im wondering. Shud the scope of the bean need to be SessionScope? In my project using session scope is not suggetsed. – MyFist Oct 19 '12 at 03:37
it is working fine after changing the scope of the bean to 'SessionScoped'. – MyFist Oct 19 '12 at 18:13
In such case (with scope as - ViewScoped) the rightAvailable elements are NOT being passed to the next page. Should I need to use ELFlash/f:view or some thing to pass it to next screen? I believe @ManagedProperty to inject rightAvailable elements in the next screen will not work if I go with ViewScoped. Isn't it? Please suggest. – MyFist Oct 22 '12 at 09:42

score 0 · Answer 2 · answered Oct 16 '12 at 15:28

0

You have <f:selectItems value="#{testListBox.selectedOptions}" /> where selectedOptions is a Map which is not a Collection. Use a collection of SelectItem in the value of f:selectItems.

answered Oct 16 '12 at 15:28

Christophe Roussy

16,299
4
85
85

Target model Type is no a Collection or Array

2 Answers2