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!


Need Your Help

Make XAMPP/Apache serve file outside of htdocs

php apache xampp server-configuration

Is it possible to configure xampp to serve up a file outside of the htdocs directory?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.