0

There are 5 select list in my html page. all the select list populate dynamically with a json response from a ajax call. In the ajax success function i need to set a value selected for each select list.

but changing value of select list is randomly fails for different select lists different time. I tried several way and what i found is jQuery is executing the next line when it takes time to change the value and never go to previous.

I tried change() function, ready() function, load() function etc with no success. i need to wait until the previous select list value has changed. how can i do that. here is my sample code. 

    var jsonParam = '';
    var serviceURL = "./someurl";
    AjaxManager.SendJson(serviceURL, jsonParam, onSuccess, onFailed);
    function onSuccess(jsonData) {
        $('#cmb1').val(jsonData.Field1);
        $('#cmb2').val(jsonData.Field2);
        $('#cmb3').val(jsonData.Field3);
        $('#cmb4').val(jsonData.Field4);
        $('#cmb5').val(jsonData.Field5);
    }
kapantzak
  • 11,610
  • 4
  • 39
  • 61
Sarmin Akter
  • 120
  • 7
  • You can chain your methods with `.then()` fucntion. https://api.jquery.com/deferred.then/ – vaso123 Jul 25 '16 at 10:51
  • $('#cmb1').val(jsonData.Field1).then(function(){ $('#cmb2').val(jsonData.Field2);}). This way? – Sarmin Akter Jul 25 '16 at 11:08
  • What is this AjaxManager. Is it some ASP.Net thing? Or is it a pure jquery? I searched for that, and found nothing with javascript. – vaso123 Jul 25 '16 at 12:16

2 Answers2

0

I think what you are looking for is .then(), the answer might be here: jQuery deferreds and promises - .then() vs .done()

Good luck :)

Community
  • 1
  • 1
sandrina-p
  • 3,794
  • 8
  • 32
  • 60
  • when i use .then or .done it says console error : Uncaught TypeError: $(...).val(...).then is not a function – Sarmin Akter Jul 25 '16 at 11:15
  • I think you are using it wrong. Take a look here: http://api.jquery.com/deferred.then/ – sandrina-p Jul 25 '16 at 11:25
  • Deferred.then is usually works with ajax call. but do not need to chain ajax call. i have only one ajax call and within the success function, i need to chain the dropdowns change event. it should change value after changing the previous one. currently it is changing randomly. please help me to fix it – Sarmin Akter Jul 25 '16 at 11:47
0

I don't know, what is this AjaxManager thing. In jQuery, you can use deferred.then() and you can chain these.

So your script should be look like this:

var jsonParam = '';
var serviceURL = "./someurl";
$.get(serviceURL, jsonParam, function (jsonData) {
    $('#cmb1').val(jsonData.Field1);
}).then(function () {
    $('#cmb2').val(jsonData.Field2);
}).then(function () {
    $('#cmb3').val(jsonData.Field3);
}).then(function () {
    $('#cmb4').val(jsonData.Field4);
}).then(function () {
    $('#cmb5').val(jsonData.Field5);
}).fail(function {
    //Here comes to fail
});

Note that, I used the $.get method. If you need to pass your parameters to the ajax by post then just change $.get to $.post.

Thats it. When $.get gets the response, the response will be in your jsonData variable, and update the #cmb1 value, then the second, and so on. Finally, if your ajax call is failed, then call the fail method.

EDIT

As you mentioned, you get error:

Uncaught TypeError: $(...).val(...).then is not a function

Did you imported the jQuery library on your page?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
vaso123
  • 12,347
  • 4
  • 34
  • 64