Обновление HTML через JavaScript и PHP

Question

Я пытаюсь показать счетчик уведомлений, обновленный после JavaScript.

Я пытался использовать следующее для обновления html:

В верхней части страницы объявляется значение счетчика (сколько сообщений имеет пользователь):

<?php
    $nc =  notificationCount($user_data['id']);
    $ng = $user_data['id'];
    if ($nc >= 1){
        $nstyle = 'style="display:block;"';
    } else {
        $nstyle = 'style="display:block;"';
    }
?>

Затем стандартная начальная загрузка значения счетчика, которая работает должным образом:

<li id ="ndiv" class="nav-item pt8" <?php echo $nstyle; ?>><a href="javascript:void(0);"  data-toggle="modal" data-target="#myModal" onclick="showUser(<?php echo $ng;?>)"> 
    <i class="fa fa-bell f18 cr"></i><span id ="nc" class="f16 cr"><?php echo $nc;?></span></a>
</li>

При попытке обновления счетчика каждые 5000 я пробовал следующее, но он не обновляется, несмотря на происходящее увеличение значения.

<script>
    function checkNotification() {
        console.log(' each 5 second...');
        document.getElementById("nc").value =  "<?php echo $nc;?>";
    }
    var myVar = setInterval(checkNotification, 5000);
</script>

Answer 1

Вам не нужна серверная сторона для отображения уведомлений.

Попробуйте:

JS:

notificationsCount = document.getElementById("notificationsCount");

numberOfNotification = 10; // example

showing = setInterval(function(){

      notificationsCount.textContent = numberOfNotificaton;

}, 5000);

HTML:

<h1>
    Number of notifications <h1 id="notificationsCount"></h1>
</h1>

Answer 2

Страница PHP возвращает результат клиенту. Как только страница вернет свой результат, все готово. Вы не можете заставить страницу PHP возвращать результат так часто. Но вы можете вызвать страницу PHP ( с использованием AJAX ), которая через регулярные промежутки времени возвращает количество уведомлений с использованием setInterval().

let notifications = document.getElementById("notifications");

// This would be a function that calls a .php page to get
// the notification count returned. You could use AJAX 
// to make that call.
function simulateServerCode(){
  return Math.floor(Math.random() * 100);
}

let timer = setInterval(function(){
  notifications.textContent = simulateServerCode();
}, 5000);

<div>You have <span id="notifications"></span> notifications.<div>