I have a series of 3 functions that all have AJAX calls that are dependent on each other.
The first one is the JSP load and the AJAX chain call:
function loadJSP(yearmonth){
$(".container_12").empty();
$(".container_12").load("jsp/demotable.jsp", function(){
loadPage(yearmonth).done(function(){
$('table').dataTable({
"ordering": false,
"initComplete": function () {
$(".ui-toolbar").hide();
$( "p" ).removeClass( "myClass yourClass" )
}
});
$(".loading").hide();
$("#tabs-1").show();
})
});
}
Now the actual ajax call is a callback chain:
function loadPage(yearmonth){
return (loadMeses(yearmonth).done(loadDados));
}
Since the first call gives the months available in a selecet box, the second part needs to know what is the most recent month before loading the data.
This chain works fine. The load data part only runs after the available months ajax call is completed. The problem is that the lines
$(".loading").hide();
$("#tabs-1").show();
runs BEFORE the table is completed. Meaning that it shows an empty table before adding the data.
This is the load data function:
function loadDadoss (){
setAJAXcharConn ();
var source = "/intl/servlet/apps.test.HTMLtest?param=&p1=test2&p2=201412";
return ($.getJSON(source,function(result){
$.each(result, function(i, field){
for(foo = 3;foo < 8;foo++){
var preparedField = accounting.formatMoney(field[foo] , "", 2, ".", ",");
$('#'+i).append('<td>'+preparedField);
}
});
})
)}
Am I missing something about callbacks here?