Append to Table via AJAX Request - Not Appearing in Correct Position

Question

I have a simple AJAX request as part of an infinite scroll on a page that fetches more records to add to an existing table that shows the first 20 rows. The AJAX request is working and returning the correct data but it's not appearing in the correct location (it's showing above the existing rows).

Here's an example of how the table looks:

<div>
  <br />
  <table class="table table-striped table-bordered">
    <thead>
      <th scope="col">Date</th>
      <th scope="col">Time</th>
      <th scope=“col”>Location</th>
      <th scope=“col”>Type</th>
      <th scope=“col”>Manager</th>
    </thead>
    <tbody>
      <tr>
        <td><a href="eventDetails.php?action=eventLink&eventID=56500">Aug 26</td>
  <td> 4:00 PM</td>
  <td> Sydney</td>
  <td> In House</td>
  <td> Barney Rubble</td>
 </tr>
 <tr>
     <td><a href="eventDetails.php?action=eventLink&eventID=56941">Aug 26</td>
  <td> 4:00 PM</td>
  <td> Melbourne</td>
  <td> External</td>
  <td> Betty Rubble</td>
 </tr>
 <tr>
  <td><a href="eventDetails.php?action=eventLink&eventID=56982">Aug 26</td>
  <td> 5:00 PM</td>
  <td> Dallas </td>
  <td> External</td>
  <td> Fred Flinstone</td>
 </tr>
 <div id="content"></div>          
    </tbody>
</table>
</div>

and here's the Javascript:

var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadArticle(skip);
    skip += 20;
  }
});

function loadArticle(pageNumber) {
    $.ajax({
      url: "getRecords.php",
      type: 'POST',
      data: "action=" + action + "&skip=" + skip,
      success: function(html) {
        $("#content").append(html); // This will be the div where our content will be loaded
      }
    });
    return false;

I added a div after the last table row to insert the new rows into:

<div id="content"></div>

but the new rows are not appearing after the last row, rather above the existing rows.

Not sure what I'm doing wrong here. I'm using the Bootstrap framework if that helps.

you can put div tags only inside a td tag see [this post](http://stackoverflow.com/questions/2974573/div-inside-table) Can you also add the `html` you receive in the `success` function? — Dhananjay, Aug 26 '16 at 05:16
The HTML is just another 20 rows, same as the table in the post starting from and ending with the final — user982124, Aug 26 '16 at 05:18

score 1 · Accepted Answer · answered Aug 26 '16 at 05:19

1

You can't have a div after a tr in a table like that. The browser will not render it where you put it if you do that.

Get rid of the <div id="content"></div> and add the id to your tbody like this
<tbody id="content">

answered Aug 26 '16 at 05:19

Wesley Smith

19,401
22
85
133

score 0 · Answer 2 · answered Aug 26 '16 at 05:26

0

Add <tr> and in tr add <td> and then within td add div. Anything written in table which is not inside <td> will show before the table

<tr>
   <td>
       <div id="content"></div>
    </td>
</tr>

answered Aug 26 '16 at 05:26

Mairaj Ahmad

14,434
2
26
40

Given the OP's question and comment, this solution would be appending `tr` tags inside a `div` element without a table to wrap it – Wesley Smith Aug 26 '16 at 05:32

Append to Table via AJAX Request - Not Appearing in Correct Position

2 Answers2