Obietnica Jquery czeka na koniec ajax
Dostaję predefiniowane wartości, które muszę wstawić do dwóch selekcji:
<div id="wrapper">
<select id="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="second"></select>
</div>
Opcje w środku#second
zależy od wybranej wartości w#first
. Te opcje są ładowane za pośrednictwem ajax:
$('#first').change( function() {
$.ajax({
url: "giveMeValues.phpOrWhatever"
}).done(function() {
// just simulating data from ajax call
$('#second').append(
'<option value="a">a</option>'+
'<option value="b">b</option>'+
'<option value="c">c</option>'
);
});
});
Problem polega na tym, że mogę ustawić wartość#second
po ładowane będą dane ajaxowe. Tak więc poniższy kod oczywiście nie zadziała:
$('#first').val('2').change();
$('#second').val('b').change();
Więc spróbowałem użyć.promise()
czekać do wywołania ajax wewnątrzchange
obsługa zostanie zakończona:
$('#first').val('2').change();
$('#wrapper').promise().then( function() {
$('#second').val('b');
console.log('setting value...');
});
Ale to nie działa. Moje pytanie brzmi: jak mogę czekać do końca wywołania ajax, a następnie ustawić#second
wartość?
Tutaj masz ochotę na ten problem:http://jsfiddle.net/W2nVd/
Dziękuję za Twój czas.