Table build with $.each and AJAX contains only th and no td

Question

In my result, I only see the th, but the td are not rendered at all. I have no problem with my data. I think I built my table incorrectly.

var table_html = '<table>';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'

table_html += '<tbody>'

$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        console.log(result.details);

        $.each(result.details, function(i,obj){
            i = i + 1;
            table_html += '<tr>'
            table_html += '<td>'+i+'</td>'
            table_html += '<td>'+obj.name+'</td>'
            table_html += '</tr>'
        })

    },
    error:function(err){

    }
});

table_html += '</tbody>'
table_html += '</table>'
$("#myModal .modal-body").empty().append(table_html);

Move `table_html += '' table_html += '' $("#myModal .modal-body").empty().append(table_html);` at the end of `success` callback. — Tushar, Oct 27 '15 at 09:29
The `$.ajax` method is asynchronous - please all the `table_html` references *inside* the `success` handler function. — Rory McCrossan, Oct 27 '15 at 09:30
Possible duplicate of [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Andreas, Oct 27 '15 at 09:32

score 0 · Answer 1 · edited May 23 '17 at 11:44

The problem here is that the code in the success callback is only executed once you have received the AJAX response. So the order of execution is like this:

The first half of the table (<table> to <tbody>) is added to table_html.
The AJAX call is initiated.
The second half of the table (</tbody>to </table>) is added to table_html.
The content of table_html, without the middle part with the data that has not yet been added since the success callback has not yet been executed, is appended to your modal.
The success callback is executed once the AJAX call gets a response. It adds the middle parts of the table (all the <tr>) to the end of the variable, but it makes no difference since the table has already been appended.

This post gives a good general explanation of the problem.

In your case, you can solve the problem like this:

//Append an empty table.
var table_html = '<table id="my_table">';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'
table_html += '<tbody>'
//This row will show a loading message.
//It will be removed once the actual content has loaded.
table_html += '<tr><td colspan=2>Loading content...</td></tr>'
table_html += '</tbody>'
table_html += '</table>'
$("#myModal .modal-body").html(table_html);

//Do the AJAX call.
$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        //This code will only run when you get the AJAX response.
        //Create the inner part of the table.
        var tr_html = "";
        $.each(result.details, function(i,obj){
            i = i + 1;
            tr_html += '<tr>'
            tr_html += '<td>'+i+'</td>'
            tr_html += '<td>'+obj.name+'</td>'
            tr_html += '</tr>'
        })
        //Append the inner part to the table.
        //This will overwrite the tr with the loading message we added earlier.
        $("#my_table tbody").html(tr_html);
    }
});

Disclaimar: I have not tested this code.

score 0 · Accepted Answer · answered Oct 27 '15 at 10:02

The $.ajax method is asynchronous so you can try like

var table_html = '<table>';
table_html += '<thead>'
table_html += '<th>No</th>'
table_html += '<th>Name</th>'
table_html += '</thead>'

table_html += '<tbody>'

$.ajax({
    url:'/reports/name-report',
    type:'POST',
    data: options,
    success:function(result){
        $.each(result.details, function(i,obj){
            i = i + 1;
            table_html += '<tr>'
            table_html += '<td>'+i+'</td>'
            table_html += '<td>'+obj.name+'</td>'
            table_html += '</tr>'
        })
        table_html += '</tbody></table>'
        $("#myModal .modal-body").empty().append(table_html);
    },
    error:function(err){

    }
});

Table build with $.each and AJAX contains only th and no td

2 Answers2