Append dynamically created table javascript

Question

I make an xhr request, I get the response and I append some values that I get to a table by appending. then I make second xhr request on another page, get some other results that I want to append under the previously inserted row..the problem is that every next append that I make instead of getting "under" the previously created row, gets before it.. I guess this is because these are dynamically created..but is there any way to solve this? without adding classes or ids to table or rows..

here is my code.. first the html

<body>
    <table border="1">
        <tr>
        <th>first cell</th>
        <th>second cell</th>
        </tr>
    </table>
    <div id="div1">
</body>

and my javascript

 function response(url, callback{
     //xhr request
  }

var url1 = "http://example1.com";
request(url1, function(response){
        var temp1 = document.getElementsByTagName("table")[0];
    var temp2create = document.createElement("tr");
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp2create.innerHTML = temp3;
    temp1.appendChild(temp2create);
 });
var url2 = "http://example1.com";
request(url2, function(response){
        var temp4 = document.getElementsByTagName("table")[0];
    var temp5create = document.createElement("tr");
    var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp5create.innerHTML = temp6;
    temp4.appendChild(temp5create);
 });

so, instead of having new row added after previous row, it gets before..

Don't use the innerHTML property to modify tables, it will fail in most (all?) versions of IE. You can use it for an entire table, or the content of a cell, but not anything in between. Use DOM methods instead. — RobG
– RobG, Commented Nov 28, 2012 at 0:17

Evan Siroky · Accepted Answer · 2012-11-28 00:08:15Z

It could be that the first xhr request is taking longer to complete than the second one. Therefore the second one appends its response before the first receives and appends its response. You could either make placeholder rows in the table if a fixed amount of requests will come back, such as:

<body>
    <table border="1">
        <tr>
            <th>first cell</th>
            <th>second cell</th>
        </tr>
        <tr id="tr1">

        </tr>
        <tr id="tr2">

        </tr>
    </table>
</body>

and javascript:

(url1,response())
{
    document.getElementById("tr1").innerHTML("someresponse");
}

(url2,response())
{
    document.getElementById("tr2").innerHTML("some other response");
}

Or you could link the requests to occur in sequence if time is not of the essence.

request(url1, function(response){
    var temp1 = document.getElementsByTagName("table")[0];
    var temp2create = document.createElement("tr");
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp2create.innerHTML = temp3;
    temp1.appendChild(temp2create);

    var url2 = "http://example1.com";
    request(url2, function(response){
        var temp4 = document.getElementsByTagName("table")[0];
        var temp5create = document.createElement("tr");
        var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
        temp5create.innerHTML = temp6;
        temp4.appendChild(temp5create);
     });
});

there is a callback on the requests, so shouldn't I assume that second response gets after first request/response is complete?
no. If you make an xmlhttprequest, the callback function is not added to the javascript event queue until the response comes back. Therefore the other requests you have lined up will fire off unless they are called specifically after handling the first response. See this page for some more info: javascript.info/tutorial/events-and-timing-depth

Carl · Accepted Answer · 2012-11-28 00:16:47Z

1

nikolas, no. The calls are asynchronous, meaning the order they run, and complete is undefined. You can not rely on the order of completion matching the order of initiation. If you need that, then the thing to do is have the second xhr be called from the first's callback (chaining).

answered Nov 28, 2012 at 0:16

Carl

5212 silver badges7 bronze badges

1 Comment

nikolas Over a year ago

I see, so I mistakenly thought that the callback would make sure that nextcall is placed after firstone is complete..thank you for pointing out

Elim Garak · Accepted Answer · 2016-07-08 17:13:04Z

This is what I used on a recent project had to append JSON to an HTML.

Define the Table

<table id="geoTable" border="1"></table>

Populate

appendTableRow('geoTable', "MPH", 70);
appendTableRow('geoTable', "KPH ", 112.654);

Function to add rows

function appendTableRow(tableName,name,value)
{
    tableName = "#" + tableName;
   //<tr><td>name</td><td>value</td></tr>

   var tableRow = "<tr><td>$name</td><td>$value</td></tr>";
   tableRow = tableRow.replace("$name",name);
   tableRow = tableRow.replace("$value",value);        
   $(tableName).append(tableRow);
}

Collectives™ on Stack Overflow

Append dynamically created table javascript

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related