无需刷新整个页面即可自动刷新在线用户表

Question

I have a table displaying the list of online and offline users in my dashboard page. I'm trying to automatically refresh the entire table every 5 seconds to show if there are other users who just logged in or out without refreshing the whole page. I have searched through different threads and pages regarding this which is telling me to use AJAX or JSP. But I can't seem to make it work.

This is my table:

<div class="col-md-2">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Status</th>
        <th>&nbsp;</th>
      </tr>
    </thead>

    <tbody>
      <?php
        $online = DB::table('users')->where('group_id', $user->group_id)->orderBy('online', 'desc')->get();
        foreach($online as $val=>$key)
        { ?>
          <tr>
            <td><?php if ($key->online == 1) { echo '<span class="label label-success">Online</span>'; } else { echo '<span class="label label-warning">Offline</span>'; } ?></td>
            <td><?=$key->first_name." ".$key->last_name?></td>
          </tr>
      <?php } ?>
    </tbody>
</table>

I found this code on a different thread, but when I tried to use it on my project, it wasn't loading the data in my table. I'm not very familiar working with javascripts or AJAX, so I'm hoping you can help me out. It'll be very much appreciated.

<script>
    $(document).ready(function(){
        $("#refresh").click(function() 
        {
            $("#Container").load("content-that-needs-to-refresh.php");
            return false;
        });
    });
</script>

<div id="Container">
<?php include('content-that-needs-to-refresh.php'); ?>
</div>
<a href="#" id="refresh">Refresh</a>

Answer 1

Make sure you loaded jQuery. You can use Google CDN or save it and load it on your own server.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Use setInterval

<script>
    $(document).ready(function(){
        var refreshUsers = setInterval(function() {
            $("#Container").load("content-that-needs-to-refresh.php");
        }, 5000); // 5000 ms = 5 sec
    });
</script>

<div id="Container">
<?php include('content-that-needs-to-refresh.php'); ?>
</div>

If you should want to stop refreshing, use

clearInterval(refreshUsers);