CODEWITHSUNDEEP
javascriptappendrowdynamic-tables
nikolas
nikolas

Reputation: 722

Append dynamically created table javascript

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..

Upvotes: 0

Views: 1954

Answers (3)

Elim Garak
Elim Garak

Reputation: 1817

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);
}

Upvotes: 0

Carl
Carl

Reputation: 509

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).

Upvotes: 1

Evan Siroky
Evan Siroky

Reputation: 9408

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);
     });
});

Upvotes: 1

Related Questions