-1

I am trying to bind dropdown and select user by id. so I have two methods like (getting users) and (select users) when I am calling select user method so it's calling but not selecting any dropdown value.

function getUsers() {
try {

    objReqUser.PageIndex = 1;
    objReqUser.PageSize = 2000;
    objReqUser.TotalPageCount = 0;
    objReqUser.User.OpType = 2;

    $.ajax({
        type: 'POST',
        url: APIUrl + 'api/GetUsers?JSONStringData=' + JSON.stringify(objReqUser),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        crossDomain: true,
        success: function (data, textStatus, xhr) {

            objResUser = data;

            if (objResUser != null && parseInt(objResUser.ID) > 0) {
                var ddl = $("[id*=ddlDeliveryBoy]");
                ddl.empty().append('<option selected="selected" value="0">Select Delivery Boy</option>');
                $.each(objResUser.User, function () {
                    ddl.append($("<option></option>").val(this.ID).html(this.UniqueName));
                });
            }
            else {

                if (objResUser != null)
                    messageProvider(objResUser.ID, objResUser.Msg);
                else
                    messageProvider(0, "There is an error !");
            }

        },
        error: function (xhr, textStatus, errorThrown) {

            messageProvider(0, errorThrown);
        }
    });
}
catch (err) {
    messageProvider(0, err.message);
}

}

and Select User Method

function selectUser(ID) {

try {
    getUsers()

    $('#ddlDeliveryBoy').val(1);

}
catch (err) {
    messageProvider(0, err.message);
}
};
Neeraj Pathak
  • 759
  • 4
  • 13

1 Answers1

1

So, what is happening is when you do $.ajax, it returns you a callback which is asynchronous. In your method, you wrote two synchronous statements

statement1 -> sync statement2 -> sync

normally they would run synchronously, but over here since u used $.ajax

statement1 ->async statement2 -> sync

so, to handle the async behaviour of statement1 and meet the requirement of calling statement2 after statement1 has done it's $.ajax. we pass a callback.

To read more about callbacks: What is a callback function?

The first method has a callback inside, and your seconds statement is sync. changing the code to:

function callback() {
 $('#ddlDeliveryBoy').val(1);
}

getUsers(callback);

function getUsers(callback) {
try {

    objReqUser.PageIndex = 1;
    objReqUser.PageSize = 2000;
    objReqUser.TotalPageCount = 0;
    objReqUser.User.OpType = 2;

    $.ajax({
        type: 'POST',
        url: APIUrl + 'api/GetUsers?JSONStringData=' + JSON.stringify(objReqUser),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        crossDomain: true,
        success: function (data, textStatus, xhr) {

            objResUser = data;

            if (objResUser != null && parseInt(objResUser.ID) > 0) {
                var ddl = $("[id*=ddlDeliveryBoy]");
                ddl.empty().append('<option selected="selected" value="0">Select Delivery Boy</option>');
                $.each(objResUser.User, function () {
                    ddl.append($("<option></option>").val(this.ID).html(this.UniqueName));
                });
            }
            else {

                if (objResUser != null)
                    messageProvider(objResUser.ID, objResUser.Msg);
                else
                    messageProvider(0, "There is an error !");
            }

            callback();

        },
        error: function (xhr, textStatus, errorThrown) {

            messageProvider(0, errorThrown);
        }
    });
}
catch (err) {
    messageProvider(0, err.message);
}
gauravmuk
  • 1,606
  • 14
  • 20