jQuery UI Widgets Forums Lists ListBox Two ListBoxes with Buttons Questions

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 5 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Two ListBoxes with Buttons Questions #88840

    Wigginst
    Participant

    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.

    • This topic was modified 5 years, 11 months ago by  Wigginst.
    • This topic was modified 5 years, 11 months ago by  Wigginst.
    Two ListBoxes with Buttons Questions #88892

    Hristo
    Participant

    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

    Two ListBoxes with Buttons Questions #88955

    Wigginst
    Participant

    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

    Two ListBoxes with Buttons Questions #88956

    Wigginst
    Participant

    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).

    • This reply was modified 5 years, 10 months ago by  Wigginst.
    Two ListBoxes with Buttons Questions #88993

    Hristo
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.