Update HTML from AJAX

Question

My table is appended to instead of updated. What would be the appropriate way to update the html. I tried to use the answer from a similar stackoverflow question but it didn't work.

Here's my webpage, which uses Bootstrap, and the relevant ajax:

<div class="bs-component">
  <table class="table table-striped table-hover ">
      <thead>
      <tr>
          <th style="font-size: 25px">Week <span id="week" style="font-size: 28px">1</span></th>
          <th>12 am - 8 am</th>
          <th>8 am - 12 pm</th>
          <th>12 pm - 4 pm</th>
          <th>4 pm - 8 pm</th>
          <th>8 pm - 12 am</th>

      </tr>
      </thead>
      <tbody>
          <script>
          function loadWeek (x) {
            $.post("weekly.php", {p: x}, function (res) {
               //$("tbody").append(res);
               $('#bs-component table > tbody:last').find('tr:first').before(res);
            });
          }
          $(function () {
            loadWeek (1);
          });
          </script>
      </tbody>
  </table>

Here's the html echoed by the php called by ajax

for ($i = 0; $i < 7; $i++) {
    echo "<tr><td>$weekDays[$i]</td>";
    for ($j = 0; $j < 5; $j++) {
        echo "<td><p>".$usersNames[$i][$j]."</p></td>";
    }
    echo"</tr>";
}

"Here's the html echoed by the php called by ajax" That's PHP, not HTML. And have you tried replaceWith() or replaceAll()? — j08691
– j08691, Commented Dec 10, 2015 at 23:33
@j08691 No I have not tried replaceWith() or replaceAll(). How would I use those? — user3920645
– user3920645, Commented Dec 10, 2015 at 23:41

Bill Hannah · Accepted Answer · 2015-12-11 00:03:47Z

1

I see a few small issues with your jQuery code. First, you want to move the <script> tag out of the table. It can be anywhere in the page, and typically goes at the bottom of the page (just before the closing body tag </body>). The reason you want to do this is that when the Ajax response returns, you want to replace the contents of the <tbody> which will overwrite your <script> tag.

Next, what you want to do with the response is replace the contents of the <tbody> (rather than append). I would rewrite your loadWeek function as follows:

function loadWeek(x) {
  $.post('weekly.php', {p: x}, function(res) {
    $('#bs-component tbody').html(res);
  });
}

You can find the documentation for the .html() function at https://api.jquery.com/html/

Notice the selector is slightly different - because you only have 1 <table> inside your <div>, and that table only has 1 <tbody> inside that table, you don't have to specify the last <tbody> that is a direct descendant of a <table> (which is what the selector you have means).

answered Dec 11, 2015 at 0:03

Bill Hannah

363 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3920645 Over a year ago

Thanks @Bill-Hannah your explanation gave me all the necessary terminology to correctly fix the problem. It worked except in the $('#bs-component tbody').html(res); the # needs to be replacedwith . $('.bs-component tbody').html(res);. [link] (w3schools.com/jquery/jquery_ref_selectors.asp) shows that . selects div class and # selects div id.

Bill Hannah Over a year ago

Right you are. I didn't look too closely at the HTML. Glad you could get it working!

Collectives™ on Stack Overflow

Update HTML from AJAX

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related