Question

I have some ajax calls in document ready to populate a table. Unfortunately the page is only being displayed once the table has been populated.

$(document).ready(function() {
    // alert('Why');
    var jsondata2a;
    turl = "/rims/tab1/get_data?abc=123";
    $.ajax({
    url: turl+"",
    cache: false,
    async: false,
    success: function(data){
            jsondata2a = data;
    },
    error: function(){
            $("#gerror").html("<p>An error has occurred!</p>");
        }
    });

However, if I put an alert statement in the ready function, the page displays immediately with the alert and then populates the table after accepting the alert.

The full page displays on the alert statement, but the page does not display until all the ajax calls have been completed if the alert is not there. I have tried to move the ready function to different parts of the page without success. I have tried with IE and Chrome.

Any help appreciated.

Thanks

Answer 1

This should work. I’m sure you have other prt of scipt which know how to draw that table. just add that code in success callback

$(document).ready(function() {
    // alert('Why');
    var jsondata2a;
    turl = "/rims/tab1/get_data?abc=123";
    $.ajax({
    url: turl+"",
    cache: false,
    // async: false,
    success: function(data){
            jsondata2a = data;
            for(var i=0; i< data.length; i++){
               $("#table_id").append("<tr>" ...boud data here data[i].someAttribute... "</tr>");
            }
    },
    error: function(){
            $("#gerror").html("<p>An error has occurred!</p>");
        }
    });