Deferred objects. On done several ajax calls
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="container">
<div class="row">
<div class="span2">
<a href="#" id="third-call" class="btn btn-primary btn-large">Tercera llamada</a>
</div>
</div>
</div>
CSS
.row {
margin-bottom:20px;
}
JavaScript
var thirdCall = function(){
var thirdAjaxCall = $.ajax({
url: '/echo/json/',
type: 'POST',
data: {
json: JSON.stringify({name: 'veamospues'}),
delay: 1
}
});
var fourthAjaxCall = $.ajax({
url: '/echo/json/',
type: 'POST',
data: {
json: JSON.stringify({url: 'http://www.veamospues.wordpress.com'}),
delay: 3
}
});
$.when(thirdAjaxCall, fourthAjaxCall).done(function(dataName, dataUrl){
alert(dataName[0].name + " ("+dataUrl[0].url+")");
});
};
$(document).ready(function(){
$('#third-call').click(thirdCall);
});