populate dropdown via ajax and automatically select a value

I'm kinda new to javascript and ajax.

The page that I'm building will ask user to select from a list. Upon selection, a dropdown will be populated from database, and a default value of that dropdown will be automatically selected.

So far I've been able to populate the dropdown OR automatically select a value. But I can't do them both in succession.

Here's the Javascript snippet that gets called upon selection of an item from a a list:

function onSelectProduct(data, index) {
//part 1: auto populate dropdown
    $.ajax({
        type: "POST",
        async: true,
        url: "http://localhost:8007/Webservice.asmx/GetUnitsByProductID",
        data: "{productID: " + data.ID + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            $("#Details_" + index + "_ConversionID").empty();
            $.each(result.d, function (key, val) {
                var option = document.createElement('option');
                option.text = val.Name;
                option.value = val.ID;
                $("#Details_" + index + "_ConversionID").append(option);
            });
        }
    });
//part 2: select one of the values
    var ddl = document.getElementById("Details_" + index + "_ConversionID");
    var opts = ddl.options.length;
    for (var i = 0; i < opts; i++) {
        if (ddl.options[i].value == data.StockUnitID){
            ddl.options[i].selected = true;
            break;
        }
    }
}

I used $("#Details_" + index + "_ConversionID").empty(); because I started with all possible options in the dropdown.

If I started with an empty dropdown, ddl.options.length will return 0 for some reason.

From my understanding, the ajax script that I wrote doesn't really change the properties of the dropdown box (ddl.options.length returns either 0 or the full list with or without the ajax operation). If that's true, then what's the right way to populate that dropdown?

Btw I'm using cshtml and .net.

Thanks!

Answers


Well you can try using $.when and .done as below:

It will execute your code once the options have been set

$.ajax({
        type: "POST",
        async: true,
        url: "http://localhost:8007/Webservice.asmx/GetUnitsByProductID",
        data: "{productID: " + data.ID + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            $("#Details_" + index + "_ConversionID").empty();
            $.when(
            $.each(result.d, function (key, val) {
                var option = document.createElement('option');
                option.text = val.Name;
                option.value = val.ID;
                $("#Details_" + index + "_ConversionID").append(option);
            })).done(function(){
                //part 2: select one of the values
                var ddl = document.getElementById("Details_" + index +"_ConversionID");
                var opts = ddl.options.length;
                for (var i = 0; i < opts; i++) {
                       if (ddl.options[i].value == data.StockUnitID){
                            ddl.options[i].selected = true;
                            break;
                       }
                } 
            });
        }
 });

I would also like to suggest one thing! Please do not use complete url as your ajax url since when you host the site this will change and http://localhost:8007/ will no longer be available!


You can write following code in Ajax Success :

$("#Details_"+index +"_ConversionID").val('value you want to select');

Thanks


Need Your Help

Mongoose Saving Incorrect Values

javascript node.js mongodb express mongoose

When creating an object from a post request, both of the fields that come from the request body are being set to the field name itself. I am not getting any errors but I am also not getting the exp...

Lightinject and xUnit InjectData

c# dependency-injection xunit light-inject

I'm trying to setup xUnit with the LightInject framework but cannot get the xUnit InlineDataAttribute to work. The following test code doesn't work: