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