jQuery UI Widgets Forums Lists DropDownList Select/Change event creating many requests to server

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

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

  • samratsaha2
    Participant

    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();

    }


    Dimitar
    Participant

    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/


    samratsaha2
    Participant

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

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

You must be logged in to reply to this topic.