Select/Change event creating many requests to server

[samratsaha2Participant]

Hi,

my web page has two dropdown lists : the second will open depending the value selected from first ( on Select/change).
actually in order to populate second dropdownlist, I have to take value selected from first dropdownList to server ( executing a database query etc ).

What I have observed , on ( Select/change ) events firing many ( more than one ) requests to server side ( both the dropdownLists are within pop-up window)

I used fiddler/chrome dev tool to monitor request and I saw multiple calls to web/app/getOptions

How can I control this, Please see below code example the way I implemented, I used on(select/change), bind but no luck

Kindly let me know ;

// First dropdownList even

$(‘#firstDropDownList’).on(‘select’, function (event)
{

var args = event.args;
if (args) {
var item = args.item;
// get item’s label and value.
var label = item.label;
var value = item.value;
var val1= item.value.split(‘:’)[0];
var val2= item.value.split(‘:’)[1];
var val3= item.value.split(‘:’)[2];
var val4= item.value.split(‘:’)[3];
var val5= item.value.split(‘:’)[4];
var val6= item.value.split(‘:’)[5];
var val7= item.value.split(‘:’)[6];
renderSecondDropDown(val1,val2,row);
}
});

// call to server side and populate second dropdownList value

function renderSecondDropDown(val1,val2, row){

var req=
{
“param1″:”val1”,
“param2″:”val2”,
“param”:”val3″
};

$.ajax({
url: “${pageContext.request.contextPath}/web/app/getOptions”,
data: JSON.stringify(req),
dataType : “text json”, // expecting a plain text but should be treated as xml
contentType : ‘application/json’,
type: “POST”,
cache: false,
async : false,
timeout: (20000),
complete: function(response){
var responseJson = $.parseJSON(response.responseText);
var isMatched=false;
var jsonObjResp = $.parseJSON(response.responseText);
if(jsonObjResp.length != 0){
var source =
{
datatype: “json”,
datafields: [
{ name: ‘optionValue’, type:’string’},
{ name: ‘optionLabel’, type:’string’}
],
localdata: response.responseText
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#secondDropDownList”).jqxDropDownList({
source: dataAdapter,
placeHolder: “Select an option”,
displayMember: “optionLabel”,
valueMember: “optionValue”,
width: ‘150’,
height: ’25’,
selectedIndex: 0,
dropDownWidth: ‘150’,
autoDropDownHeight: true,

});
$(“#secondDropDownList”).show();

}

[DimitarParticipant]

Hi samratsaha2,

Your code seems in order. Could you, please clarify which is called multiple times – the select event handler function (with renderSecondDropDown) or the Ajax call/server request only. And is renderSecondDropDown called anywhere else in your code?

Please also make sure you are using the latest version of jQWidgets (4.4.0).

You may also be interested in the following demo that shows a similar functionality and works as expected: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/cascadingcombobox.htm?light.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[samratsaha2Participant]

Hi Dimitar, select event calls renderSecondDropDown method multiple time. in your example , you have used jqxComboBox instead of jqxDropdownList, does it make any deference?

[Author]

Posts