2015-06-09 14 views
7

У меня есть таблица, отображающая список онлайн-пользователей и пользователей офлайн на странице моей панели. Я пытаюсь автоматически обновлять всю таблицу каждые 5 секунд, чтобы показать, есть ли другие пользователи, которые только вошли в систему или вне нее, не обновляя всю страницу. Я искал различные темы и страницы, касающиеся этого, который говорит мне использовать AJAX или JSP. Но я не могу заставить его работать.Автоматическое обновление таблицы онлайн-пользователей без обновления всей страницы

Это мой стол:

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

Я нашел этот код в другом потоке, но когда я попытался использовать его на моем проекте, это не загружая данные в моей таблице , Я не очень хорошо знаком с javascripts или AJAX, поэтому я надеюсь, что вы можете мне помочь. Это будет очень оценено.

<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> 
+0

Если вы хотите перезагрузить автоматически каждые 5 секунд, используйте 'setTimeout'. Но я не понимаю концепцию '# refresh', нажмите здесь, когда вы хотите его автоматически! И я полагаю, что ваш 'content-that-needs-to-refresh.php' содержит' table', который вы хотите загрузить правильно? –

+0

Итак, код, который вы отправили, загружает таблицу один раз, и вы спрашиваете, как его обновить, или он никогда не работал? Просто чтобы проверить (как вы упомянули, что вы не знакомы с JS) загрузили ли jquery lib на свою страницу? –

ответ

1

Убедитесь, что вы загрузили jQuery. Вы можете использовать Google CDN или сохранить его и загрузить на свой собственный сервер.

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

Использование 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> 

Если вы должны хотеть, чтобы остановить освежающий, используйте

clearInterval(refreshUsers); 
+0

@YllanLacorte Любая обратная связь? –

3

В вашем случае прекрасно работает для вас.

setInterval(function() 
{ 
    //call ajax here..for your table result 
} 
}, 3000);  

, а затем ajax даст вам результат каждые 3 секунды.

Я надеюсь, что это сработает для вас.

Смежные вопросы