Two ListBoxes with Buttons Questions

[WigginstParticipant]

I have multiple listboxes side by side, I’m using them to build profile for users. I’ve disabled the ability to drag and drop because of cross contamination and am only using jqxButtons to add or remove items. The first box on the left is initially empty and the box on the right has all the possible selections. The add button works great(to pull values from the right to the left), however, you can’t even click on the first added value(in the left) or use the remove button until at least two values have been added to the left box.

Here’s my code

$("#addToSchools").jqxButton({ width: '100px'});
$("#removeFromSchools").jqxButton({ width: '100px'});
$("#addToSchools").on('click',function (event) { var items = $("#allSchoolsBox").jqxListBox('getSelectedItems'); $("#schoolItemsBox").jqxListBox('insertAt', items[0], 0); $("#allSchoolsBox").jqxListBox('removeItem', items[0]); setTeacher(); setCourse(); setCourseGroups(); setStudent(); });
$("#removeFromSchools").on('click',function (event) { var items = $("#schoolItemsBox").jqxListBox('getSelectedItems'); $("#allSchoolsBox").jqxListBox('insertAt', items[0], 0); $("#schoolItemsBox").jqxListBox('removeItem', items[0]); setTeacher(); setCourse(); setCourseGroups(); setStudent(); });

//=====================  Edit Session Expander  ==========================//
var sourceSchool = { datatype: "json", datafields: [ { name: 'ProfileSchools', type: 'string' }, { name: 'numberSchools', type: 'string' } ], url: 'profile_data.asp', data: { action: 'School' } };
var adapterSchool = new $.jqx.dataAdapter(sourceSchool, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + sourceSchool.url + '" : ' + error); }});
$("#allSchoolsBox").jqxListBox({ source: adapterSchool, selectedIndex: 0, displayMember: "ProfileSchools", valueMember: "numberSchools", filterable: true, theme: 'berkeley', allowDrag: false, allowDrop: false, width: '80%'});
$("#schoolItemsBox").jqxListBox({selectedIndex: 0, allowDrop: false, allowDrag: false, theme: 'berkeley', width: '80%'});

Please advise of what could be causing this.

[HristoParticipant]

Hello Wigginst,

Could you tell is there any error message? Also, which version you use and on which browser?
I cannot reproduce exactly the same example but I try with this one below and it looks ok:
https://www.jseditor.io/?key=two-listboxes

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[WigginstParticipant]

Yes,

jqx-all.js:7 Uncaught TypeError: Cannot read property ‘index’ of undefined
removeItem @ jqx-all.js:7
a.jqx.invoke @ jqx-all.js:7
a.jqx.jqxWidgetProxy @ jqx-all.js:7
(anonymous function) @ jqx-all.js:7
each @ jquery-latest.min.js:2
each @ jquery-latest.min.js:2
a.fn.(anonymous function) @ jqx-all.js:7
(anonymous function) @ profilebuilder.asp:1575
dispatch @ jquery-latest.min.js:3
r.handle @ jquery-latest.min.js:3

This @ profilebuilder.aps:1575 is this line.
$("#removeFromSchools").on('click',function (event) { var items = $("#schoolItemsBox").jqxListBox('getSelectedItems'); $("#allSchoolsBox").jqxListBox('insertAt', items[0], 0); $("#schoolItemsBox").jqxListBox('removeItem', items[0]); setTeacher(); setCourse(); setCourseGroups(); setStudent(); });

In the example you’ve provided the remove button is throwing an error as well. In Chrome(Version 52.0.2743.82 m), in Firefox(Nightly 48.0.2), and in IE(10). Please note, only add one value and then use the remove button is when you will get the error. You will get the same error if you added multiple values and then try to select the first value in the box and the use the remove button.

It is not allowing you to select the top value until a value under it has been selected. I hope that I’m explaining this well enough for you to understand.

Thanks

[WigginstParticipant]

Quick note,

If you change the selectedIndex: 0 to selectedIndex: -1 it functions correctly, because it allows the user to select the very top value first(without selecting a value below the 0 index).

[HristoParticipant]

Hello Wigginst,

Please, take a look at this workaround:
https://www.jseditor.io/?key=two-listboxes-edit

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts