I am in mobile app and I use multiple Ajax calls to receive data from web server like below
function get_json() {
$(document).ready(function() {
$.ajax({
url: 'http://www.xxxxxxxxxxxxx',
data: {
name: 'xxxxxx'
},
dataType: 'jsonp',
//jsonp: 'callback',
//jsonpCallback: 'jsonpCallback',
success: function(data) {
$.each(data.posts, function(i, post) {
$.mobile.notesdb.transaction(function(t) {
t.executeSql('INSERT into bill (barcode, buildingcode, buildingaddress, flatname, flatdescription, entryseason, period, amount, pastpayments, todaypayments, paydate, receiptno) VALUES (?,?,?,?,?,?,?,?,?,?,?,?);', [post.Id, post.Code, post.Address, post.Name, post.Description, post.EntrySeason, post.Period, post.Revenue, post.PastPayments, post.todaypayments, post.paydate, post.receiptno],
//$.mobile.changePage('#page3', 'slide', false, true),
null);
});
$('#mycontent').append(post.Name);
});
}
});
$.ajax({
xxxx
});
$.ajax({
xxxx
});
});
}
How can I force the 2nd ajax call to begin after the end of the first... the 3rd after the end of the 2nd and so go on?
Place them inside of the success:
of the one it relies on.
$.ajax({
url: 'http://www.xxxxxxxxxxxxx',
data: {name: 'xxxxxx'},
dataType: 'jsonp',
success: function(data){
// do stuff
// call next ajax function
$.ajax({ xxx });
}
});