Table is not adding to div without alert message

Question

I can't add table to div with alert box explicitly called.

var content = "<table class='table1'>";
$.getJSON("/controller/Method", {
    param1: val1
}, function (data) {
    $.each(data, function (key, value) {

        content += "<tr><td class='class1'>text1</td></tr>";

    });
    content += "</table>";
});

alert(content);

$('#div1').append(content);

If i remove the alert box, table is not adding to div.

I don't understand why table is getting added only on page flickers like alert box.

Weird!!

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Jason P, Apr 25 '14 at 01:06

Yair Nevet · Accepted Answer · 2014-04-25T01:31:44.503

Immediately after the AJAX call, you are appending the table to the div without considering the time of this asynchronous operation to take, you actually not waiting for any result to come back from the server and just raising away.

On the other hand, when you call the alert function, luckily only (!), you're in effect "waiting" for the result from the server to arrive (a matter of milliseconds probably).

Alternatively, append the table only on the success callback:

var content = "<table class='table1'>";
$.getJSON("/controller/Method",
        {
            param1: val1
        }
        , function (data) {
            $.each(data, function (key, value) {
                  content += "<tr><td class='class1'>text1</td></tr>";
            });

            $('#div1').append(content);
            $('#div1').append("</table>"); 
        });

score 0 · Answer 2 · answered Apr 25 '14 at 01:09

$.getJSON is an asynchronous call and therefore the javascript interpreter does not wait for it to complete before moving on to the code after it. The alert effectively delays the interpreter allowing the asynchronous call to finish in time for the append. What you should do is place the append code inside the success callback:

var content = "<table class='table1'>";
$.getJSON("/controller/Method",
    {
        param1: val1
    }
    , function (data) {
        $.each(data, function (key, value) {

              content += "<tr><td class='class1'>text1</td></tr>";

        });
        content += "</table>";
        $('#div1').append(content); 
    });

score 0 · Answer 3 · answered Apr 25 '14 at 02:32

Please note the getJSON send an asynchronous request this means it does not wait for response of the request. Yuo should try this:

 $.ajax({
            type: "GET", 
             url: "/controller/Method",
            contentType: "application/json", 
            dataType: "json",
            data: {},
            async:false,
            success: function (data) {
             $.each(data, function (key, value) {

        content += "<tr><td class='class1'>text1</td></tr>";

        });
        content += "</table>";
            },
            error: function (err) {
         alert("Error");
            }
        });

   $('#div1').append(content);

The "asyns:false" will solve your problem here by making the ajax request synchronous.

I have yet to see a situation where `async: false` _isn't_ a bad idea. — Jason P, Apr 25 '14 at 15:26

Table is not adding to div without alert message

3 Answers3