Question

I get a table from the server using ajax request. After I insert the table to the html I want to make some modifications but it doesn’t work.

My code is simple:

$.get("someurl", function(data) {
    $("#scenarios").html(data)
}); 
$("#scenarios table tr:first").append("<th>bla</th>"); 
$("#scenarios table tr:gt(0)").append("<td><input type='checkbox'></td>");

I see the table, but I the last two lines doesn’t work.
If I copy those two lines and insert them in Chrome console (F12) it works perfectly.

Any idea?

Answer 1

due to the async nature of ajax, the selectors you have written execute before the table is added, move these line inside the success call back

$.get("someurl", function(data) {
    $("#scenarios").html(data);
    $("#scenarios table tr:first").append("<th>bla</th>"); 
    $("#scenarios table tr:gt(0)").append("<td><input type='checkbox'></td>");
});