Jquery обещание ждать Аяксу конца

Question

Я получаю предопределенные значения, которые я должен вставить в два выбирает:

<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> 

Параметры внутри #second зависит от выбранного значения в #first. Эти опции будут загружены с помощью 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>' 
      ); 
     }); 
    }); 

Проблема заключается в том, что я могу установить значение #secondпосле данных Ajax будет загружен. Поэтому следующий код, конечно, не работает:

$('#first').val('2').change(); 
$('#second').val('b').change(); 

Так я пытался использовать .promise() ждать недо вызов Ajax внутри change обработчик будет завершен:

$('#first').val('2').change(); 
    $('#wrapper').promise().then(function() { 
     $('#second').val('b'); 
     console.log('setting value...'); 
    }); 

Но это не работает. Мой вопрос: как я могу дождаться окончания вызова ajax, а затем установить значение #second?

Здесь у вас есть скрипка этой проблемы: http://jsfiddle.net/W2nVd/

Спасибо за ваше время.

Answer 1

Вы должны установить обещание от Аякса так:

(function($) { 
    // Our Ajax promise variable 
    var promise; 

    $('#first').change(function() { 
     // Set the ajax promise variable 
     promise = $.ajax({ 
      url: "#" 
     }).done(function() { 
      $('#second').append(
       '<option value="a">a</option>'+ 
       '<option value="b">b</option>'+ 
       '<option value="c">c</option>' 
      ); 
      console.log('appending new content...'); 
     }); 
    }); 

    $('#first').val('2').change(); 
    // the var `promise` was set on the line above when it executed 
    // the `change()` callback 
    promise.promise().done(function() { 
     $('#second').val('b'); 
     console.log('setting value...'); 
    }); 

})(jQuery); 

JSFiddle: http://jsfiddle.net/W2nVd/2/

Answer 2

Возможно, мне не хватает некоторых ваших требований к рабочим потокам, но не можете ли вы просто установить значение # секунды после добавления параметров?

$.ajax({ 
      url: "#" 
     }).done(function() { 
      $('#second').empty().append(
       '<option value="a">a</option>'+ 
       '<option value="b">b</option>'+ 
       '<option value="c">c</option>' 
      ); 
      $('#second').val('b'); 
      console.log('appending new content...'); 
     }); 

Обновлено скрипку: http://jsfiddle.net/W2nVd/1/

Answer 3

.done() именно то, что вы поиск просто положил его внутри..поэтому

t гу ...

$('#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" selected="selected">b</option>'+ 
      '<option value="c">c</option>' 
     ); 
    }); 
}); 

.... или .....

$('#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>' 
     ); 
     $('#second').val('b'); // change value after options are available 


    }); 
});