jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ListBox › Refreshing jqxListBox content
Tagged: dataadapter, ListBox
This topic contains 2 replies, has 2 voices, and was last updated by hsnvv 11 years, 3 months ago.
-
Author
-
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,
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 StoevjQWidgets Team
http://www.jqwidgets.comThanks, Peter,
I’ll try it and write the result here.
-
AuthorPosts
You must be logged in to reply to this topic.