CODEWITHSUNDEEP
javascriptjqueryhtmlajaxtwitter-bootstrap-3
user982124
user982124

Reputation: 4610

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:

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

Upvotes: 0

Views: 306

Answers (2)

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14604

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>

Upvotes: 0

Wesley Smith
Wesley Smith

Reputation: 19571

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

Upvotes: 2

Related Questions