Why Dropdown list data is refilling with same values, initially I'm loading the data using page_load and next calling ajax method in asp.net c#

Viewed 42

Initially I'm loading the ddl data using page_load and next I'm using the AJAX method and fetching the dependency data using Web Method so when I'm selecting the dependency data using `AJAX' the data is coming but the ddl is filling with previous loaded dll data I'm not sure what is the issue.

Here is my code and examples :-

Initially I'm loading the ddl data using page_load event

            if (!IsPostBack)
            {
                firstexpdate = GetExpDates("nifty", "ce");
                firststrikeprice = GetStrikePrice("nifty", firstexpdate);
                lotsize = GetLotSizeVal("nifty", firstexpdate);
                ltpprice = GetGreeksPrice("nifty", firstexpdate, "ce");
            }

Like below I'm getting the ddl data.

page_load event data

And here "NIFTY" textbox is autocomplete textbox if I enter minLength: 3 this logic will execute and once enter the acc the autocomplete logic will fire and able to fetching the data from WebMethod and next I'm calling the AJAX method(because once we select the autocomplete textbox data the next ce,date,13500 ... controls data should fill autometically) for auto filling the data.

Here is how I calling the AJAX method logic

$(document).ready(function () {


//Initially I'm calling this function 
autocomplete(); 


//Page load even I written because I used all control under the `updatepanel`
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        autocomplete();
    }

});

function autocomplete() {

$("#search").autocomplete({
source: function (request, response) {

// my source logic is here and able to fetching the data successfully

  //once I fetch all the symbols and next I'm calling this method
       doSearch(suburbs); //Calling the Symbol Display Method{in this suburbs I'm filling the response data}
},
minLength: 3 //This is the Char length of inputTextBox   
 });
}

function doSearch(suburbs) {

//And here I written all my required logic and next I'm calling this method for auto fill data 
//Like how I explained above query
            
        var smbltext = $(this).text(); //Here will come `ACC` Symbol in autocomplete textbox
            AutoFillUsingSymbol(smbltext); // Filling the dependency fields data

}

//This is the full logic of auto filling the controls once we select the`autocomplete`textbox data
function AutoFillUsingSymbol(symbol) {

    if (symbol != '') {

        var paramsmbl = { entredsmbl: symbol, selectedinstrument: $('#AutoTradeTop_Instrument option:selected').text()};
        //alert(paramsmbl.entredsmbl);

        $.ajax({

            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "AutoTrade.aspx/AutoFillData",
            data: JSON.stringify(paramsmbl),
            dataType: "json",  

            dataFilter: function (data) {

                return data;
            },

            success: function (data) {

//Clearing before filling the data into ddl
                $('#AutoTradeTop_expdate').empty();
                $('#AutoTradeTop_strikeprice').empty();
                $('#autotrade_lotsizeid').html('');
                $('#LTPliveAmount').html('');


                var length = data.d.length;

                //data.d.each(function (index, element) {
                //}

                $.each(data.d, function (key, value) {

                    //alert(value);

                    if (value.indexOf("-") != -1) {

                        //alert(value + "date found");
                        $("#AutoTradeTop_expdate").append($("<option></option>").val(key).html(value));
                    }
                    else {

                        if (!(key == length - 2 || key == length - 1)) {

                            //alert(value + " value found ");
                            $("#AutoTradeTop_strikeprice").append($("<option></option>").val(key).html(value));
                        }
                        else {

                            if (key == length - 2) {

                                //alert(value + "LotSizeVal found");
                                $('#autotrade_lotsizeid').html(value);
                            }
                            else if (key == length - 1) {

                                //alert(value + "LTP Price found");
                                $('#LTPliveAmount').html(value);
                            }
                        }

                    }
                });

            },
            error: function ajaxError(data) {
                alert(data.status + ' : ' + data.statusText);
            }

        });
    }

}

Once this AJAX logic hit AutoFillUsingSymbol(symbol) It will go to WebMehod logic and able to fetching the required data and filling into ddl list.

before filling into ddl data I'm clearing(emptying the dropdown list data) the ddl data and refilling

$('#AutoTradeTop_expdate').empty();
                $('#AutoTradeTop_strikeprice').empty();
                $('#autotrade_lotsizeid').html('');
                $('#LTPliveAmount').html('');

Here is the example image of auto filling data once we select acc symbol and date is loading what I selected symbol acc

auto filling

But if I select any one date the dropdown list data is clearing and filling the previous symbol data `nifty' see the above first image for reference.

example image

clearing and refilling same data

Note :- I know if we fill or change the dropdownlist client side code, then the list of values does not persist but initially I filled the ddl data in the page_load event and next I wrote the AJAX method but why the values are not loading properly.

Suggest me what is the issue and where I did the mistake I'm beginner in the client side code development .

0 Answers
Related