Question

I have this code

$('#mySelect').change(function() {
  $.get(
    "test.php",
    function(data) { alert('test1'); }
  );
});

I need to fire the event change of #mySelect, and wait for the answer of the ajax to perform a other task. But when I try

$.when($('#mySelect').change()).done(function() { alert('test2'); });

It only wait for the change is finish, and the ajax sended, not received.
So I have the alert ‘test2’ before ‘test1’
How can I make $.when wait for everything inside the even to be finish?

Answer 1

You’re quite close, you just need to return the deferred object in the change event anonymous funciton:

$('#mySelect').change(function() { 
    return $.get( 
      "test.php", 
      function(data) { alert('test1'); }//I removed the trailing comma here, it will cause problems
    ); 
}); 
$.when($('#mySelect').change()).done(function() { alert('test2'); }); 

This will return the deferred object associated with the $.get() AJAX call. That way the $.when() will wait for the AJAX call to complete and then run the function in .done() (you can also use .then()).