jQuery-下一行代码后Ajax调用完成

Question

I have the following ajax function which dynamically adds options to a dropdown list.

var getData = function() {

    $.getJSON('api/someurl')
            .done(function (data) {

                console.log(data);


                var results = $("#Mydropdown")
                              .empty()
                              .append("<option value=''>Please select</option>");

               // loop data and build list
            })
            .fail(function (jqXHR, textStatus, err) {

            });
};

If I already have a value selected which I hold in some input field, then on page load I want to recreate the list and set the selected option to what was previously selected.

The following doesn't work. In the console I can see the ajax data is being returned after this line executes $('#Mydropdown').val($("#SelectedVal").val()); so the value isn't getting selected?

if ($("#SelectedVal").val()) {
    getData(); // this function logs to console too
    $('#Mydropdown').val($("#SelectedVal").val());
    console.log('done');
}

How do I fix?

* Note * I call the getData function in other functions as well which is why I don't pass the selected value in the above scenario in the function.

Answer 1

You need to set the selected value after updating the dropdown inside the success callback:

var selectedValue = $("#SelectedVal").val();
if (selectedValue) {
    getData(selectedValue);
}

and then:

var getData = function(selectedValue) {
    $.getJSON('api/someurl').done(function (data) {
        var results = $("#Mydropdown")
            .empty()
            .append("<option value=''>Please select</option>");

        // loop data and build list

        // after you have built the new list set the selected value
        // to what it previously was
        $('#Mydropdown').val(selectedValue);
    })
    .fail(function (jqXHR, textStatus, err) {
    });
};

Alternatively if you don't want to set the selected value inside the getData function, you could use a callback:

var selectedValue = $("#SelectedVal").val();
if (selectedValue) {
    getData(function() {
        $("#SelectedVal").val(selectedValue);
    });
}

and your getData function might look like this:

var getData = function(callback) {
    $.getJSON('api/someurl').done(function (data) {
        var results = $("#Mydropdown")
            .empty()
            .append("<option value=''>Please select</option>");

        // loop data and build list

        // after you have built the new list invoke the callback
        callback();
    })
    .fail(function (jqXHR, textStatus, err) {
    });
};

Answer 2

you should select value in the callback of getdata success here: see attached code here:

       $.getJSON('api/someurl')
        .done(function (data) {


            var results = $("#Mydropdown")
                          .empty()
                          .append("<option value=''>Please select</option>");

           // loop data and build list
           //After List Build is Completed Select Drop Down Here

            $('#Mydropdown').val($("#SelectedVal").val());

            console.log('done');

        })
        .fail(function (jqXHR, textStatus, err) {

        });

Answer 3

Maybe use doneCallback function for example;

Use callback

var getData = function(doneCallback) {

    $.getJSON('api/someurl')
            .done(function (data) {

                console.log(data);


                var results = $("#Mydropdown")
                              .empty()
                              .append("<option value=''>Please select</option>");

               // loop data and build list
               if(doneCallback)
                doneCallback();
            })
            .fail(function (jqXHR, textStatus, err) {

            });
};

Define callback

if ($("#SelectedVal").val()) {
    getData(function(){
        $('#Mydropdown').val($("#SelectedVal").val());
    });
    console.log('done');
}