0

I am trying to bind drop-down through global variable (names is the array name) which binds fine below:

Click here - dropdown is populating fine

  var name = ['us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya', 'us', 'china', 'kenya'];

But when i try to populate the array (ddList is the array name) in the success call back function(fnsuccesscallback), drop-down is NOT populating.

Click here - drop-down is not pupulating

 function fnsuccesscallback(data) {         
            $.each(data.d, function () {              
                ddList.push(this['Value']);             
            });    
            ddList.push('a');
            ddList.push('b');
            ddList.push('c');
            ddList.push('d');

        }

But i want to populate the array in call back function only.

Could you please let me know how to fix this?

updated:

Drodown formating screwed up

Getting data but formating of dropdown is screwed up

SmartestVEGA
  • 8,415
  • 26
  • 86
  • 139
  • Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – James May 17 '17 at 12:54
  • The ajax success (or indeed failure) callbacks are executed well after your array.map call because Async. You should do the map within the success function. – James May 17 '17 at 12:55
  • if we do map within success then droddown will not bind data properly, what is the alternate solution? – SmartestVEGA May 17 '17 at 12:59

1 Answers1

0

As I mentioned in the comments, your approach isn't working because the ajax success function executes well after you try to append the result to the select.

You should append the new options during the callback. Give this a try:

function fnsuccesscallback(data) {
    data.map(function (el) {
        $('.multiselect').append("<option value='" + el.Value + "'>" + el.Value + "</option>");
    });
}
James
  • 20,957
  • 5
  • 26
  • 41
  • No luck ...is this what you trying to do ? https://jsfiddle.net/rLwep5yc/3/ – SmartestVEGA May 17 '17 at 13:13
  • Well, it's not gonna work on jsfiddle, the ajax url is "Test.aspx/GetAllCultures", and the fnerrorcallback is being hit instead of fnsuccesscallback. Try it on your server where that url is valid. If it still fails make sure it's receiving the expected server response. – James May 17 '17 at 13:15
  • i tried it in visual studio but not working same results like below https://jsfiddle.net/rLwep5yc/6/ – SmartestVEGA May 17 '17 at 13:21
  • I am getting response without any issues in the data variable of callback function – SmartestVEGA May 17 '17 at 13:22
  • Can you update question with contents of server response please – James May 17 '17 at 13:40
  • https://jsfiddle.net/rLwep5yc/9/ i am getting data but formating of dropdown has been screwed up – SmartestVEGA May 17 '17 at 13:51