Jquery promete esperar até o final do ajax
Estou recebendo valores predefinidos, que eu tenho que inserir em duas seleções:
<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>
Opções dentro#second
depende do valor selecionado em#first
. Essas opções são carregadas via 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>'
);
});
});
O problema é que eu posso definir o valor de#second
depois de os dados do ajax serão carregados. Então, seguir o código obviamente não funcionará:
$('#first').val('2').change();
$('#second').val('b').change();
Então eu tentei usar.promise()
esperar até chamar ajax dentrochange
o manipulador será concluído:
$('#first').val('2').change();
$('#wrapper').promise().then( function() {
$('#second').val('b');
console.log('setting value...');
});
Mas isso não funciona. Minha pergunta é: como eu posso esperar para finalizar a chamada do ajax, e então definir#second
valor?
Aqui você tem violino para este problema:http://jsfiddle.net/W2nVd/
Obrigado pelo seu tempo.