user982124 user982124 - 1 year ago 48
Ajax Question

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

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:

<br />
<table class="table table-striped table-bordered">
<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>
<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>
<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>
<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>
<div id="content"></div>

and here's the Javascript:

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

function loadArticle(pageNumber) {
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.

Answer Source

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