jQWidgets Forums

jQuery UI Widgets Forums Lists ListBox Refreshing jqxListBox content

This topic contains 2 replies, has 2 voices, and was last updated by  hsnvv 11 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Refreshing jqxListBox content #51241

    hsnvv
    Participant

    Hello,

    I am using 5 ListBoxes parallel, each next listbox is initializing after previous one’s select event.

    my code:

    
    function initAreaListBox() {
        
        var theme=getDemoTheme(); 
        var source={
            datatype: "json",
            datafields: [
            {
                name: 'id', 
                type: 'string'
            },
            {
                name: 'value', 
                type: 'string'
            }
            ],
            url: "client/get_data.jsp",
            data: {
                operation: '1'
            }
        };
        
        var areaDataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function() {
                $('#sw_areaDiv').on('select', function(event) {
                    var args = event.args;
                    var item = args.item;
                    var areaId = item.value;
                    
                    
                    if(areaDataAdapter.records[item.index]) {
                        area_name = areaDataAdapter.records[item.index].value;
                    }
                    
                    area_code = areaId;
    
                    invalidate_listboxes_by_code("1");
                    
                    initDepartmentListBoxByAreaCode(areaId);
                    initPositionListBoxByCode(areaId);
    
                 });
            }
        }); 
        
        $("#sw_areaDiv").jqxListBox({
            source: areaDataAdapter, 
            width: 370,
            height: 100, 
            theme: theme,
            displayMember: "value",
            valueMember: "id"
        });
        
    }
    
    function initDepartmentListBoxByAreaCode(area_code) {
        var theme=getDemoTheme(); 
        var source={
            datatype: "json",
            datafields: [
            {
                name: 'id', 
                type: 'string'
            },
            {
                name: 'value', 
                type: 'string'
            }
            ],
            url: "client/get_data.jsp",
            data: {
                operation: '2',
                area_code: area_code
            }
        };
        
        var departmentDataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function() {
                $('#sw_depDiv').on('select', function(event) {
                    var args = event.args;
                    var item = args.item;
                    var depId = item.value;
                    var s_type = "";
                    var section_id = "";
    
                    dep_code = depId;
                    if(departmentDataAdapter.records[item.index]) {
                        dep_name = departmentDataAdapter.records[item.index].value;
                    }
    
                    $.ajax({
                        url: "client/get_data.jsp",
                        type: 'get',
                        datatype: 'json',
                        data: {
                            dep_code: depId
                        },
                        beforesend: function() {
                            invalidate_listboxes_by_code("2");
                            invalidate_global_data_by_code("2");
                        },
                        success: function(result) {
                            result = JSON.parse(result);
                            if(result != null && result.length > 0) {
                                section_id = result[0].section_id;
                                s_type = result[0].status;
                            }
    
                            initPositionListBoxByCode(depId);
    
                            if(s_type != null && s_type == "V") {
                                initDivisionListBoxBySectionId(section_id);
                            }
                            else {
                                initSectionListBoxByDepCode(depId);
                            }
                        }
                    });
                });
            }
        }); 
        
        $("#sw_depDiv").jqxListBox({
            source: departmentDataAdapter, 
            width: 370,
            height: 100, 
            theme: theme,
            displayMember: "value",
            valueMember: "id"
        });
        
    }
    
    function initSectionListBoxByDepCode(department_code) {
        var theme=getDemoTheme(); 
        
        var source={
            datatype: "json",
            async: false,
            datafields: [
            {
                name: 'id', 
                type: 'string'
            },
            {
                name: 'value', 
                type: 'string'
            },
            {
                name: 'div_type',
                type: 'string'
            }
            ],
            url: "client/get_data.jsp",
            data: {
                operation: '3',
                dep_code: department_code
            }
        };
        
        var sectionDataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function() {
                $('#sw_sectionDiv').on('select', function(event) {
                    var args = event.args;
                    var item = args.item;
                    var section_id = item.value;
                    
                    section_code = section_id;
                    if(sectionDataAdapter.records[item.index]) {
                        section_name = sectionDataAdapter.records[item.index].value;
                    }
                    invalidate_listboxes_by_code("3");
                    invalidate_global_data_by_code("3");
                    
                    initPositionListBoxByCode(section_id);
                });
            }
        }); 
                    
        $('#sw_sectionDiv').jqxListBox({
                        source: sectionDataAdapter, 
                        width: 370,
                        height: 100, 
                        theme: theme,
                        displayMember: "value",
                        valueMember: "id"
                    });
        
    }
    
    function initDivisionListBoxBySectionId(sectionId) {
        var theme=getDemoTheme(); 
        
        var source={
            datatype: "json",
            async: false,
            datafields: [
            {
                name: 'id', 
                type: 'string'
            },
            {
                name: 'value', 
                type: 'string'
            },
            {
                name: 'div_type',
                type: 'string'
            }
            ],
            url: "client/get_data.jsp",
            data: {
                operation: '4',
                section_code: sectionId
            }
        };
        
        var divisionDataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function() {
                $('#sw_divisionDiv').on('select', function(event) {
                    var args = event.args;
                    var item = args.item;
                    var division_id = item.value;
                    
                    division_code = division_id;
                    if(divisionDataAdapter.records[item.index]) {
                        division_name = divisionDataAdapter.records[item.index].value;
                    }
                    
                    invalidate_listboxes_by_code("4");
                    invalidate_global_data_by_code("4");
                    
                    initPositionListBoxByCode(division_id);
                });
            }
        }); 
        
        $('#sw_divisionDiv').jqxListBox({
                        source: divisionDataAdapter, 
                        width: 370,
                        height: 100, 
                        theme: theme,
                        displayMember: "value",
                        valueMember: "id"
                    });
        
    }
    
    function initPositionListBoxByCode(code) {
        var theme=getDemoTheme(); 
        
        var source={
            datatype: "json",
            async: false,
            datafields: [
            {
                name: 'id', 
                type: 'string'
            },
            {
                name: 'value', 
                type: 'string'
            }
            ],
            url: "client/get_data.jsp",
            data: {
                operation: '5',
                join_code: code
            }
        };
        
        var positionDataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function() {
                $('#sw_positionDiv').on('select', function(event) {
                    var args = event.args;
                    var item = args.item;
                    var position_id = item.value;
    
                    position_code = position_id;
                    if(positionDataAdapter.records[item.index]) {
                        position_name = positionDataAdapter.records[item.index].value;
                    }
                });
            }
        }); 
        
        $('#sw_positionDiv').jqxListBox({
                        source: positionDataAdapter, 
                        width: 370,
                        height: 100, 
                        theme: theme,
                        displayMember: "value",
                        valueMember: "id"
                    });
        
    }
    
    function invalidate_listboxes_by_code(operation_code) {
        
        var theme = getDemoTheme();
        
        switch(operation_code) {
            case "1":
                $("#sw_depDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
    
                $("#sw_sectionDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
    
                $("#sw_divisionDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
    
                $("#sw_positionDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
                break;
                
            case "2":
                $("#sw_sectionDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
    
                $("#sw_divisionDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
    
                $("#sw_positionDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
                break;
                
            case "3":
                $("#sw_positionDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
                break;
                
            case "4":
                $("#sw_positionDiv").jqxListBox({
                    source: [], 
                    width: 370,
                    height: 100, 
                    theme: theme,
                    displayMember: "value",
                    valueMember: "id"
                });
                break;
        }
        
    }
    
    

    It works, but it sends many requests to server, about 20-30 requests per click. Am I doing something wrong?

    Regards,

    Refreshing jqxListBox content #51245

    Peter Stoev
    Keymaster

    Hi hsnvv,

    It seems that you create new dataAdapter which makes a server call on each Click. Make sure that you initialize jqxListBox only once. Then, if you want to refresh the ListBox’s data, you should set its “source” property and do not do anything else.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Refreshing jqxListBox content #51246

    hsnvv
    Participant

    Thanks, Peter,

    I’ll try it and write the result here.

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

You must be logged in to reply to this topic.