Php ajax fetching same file html again and again

Question

I am working on notifications in php. In header file, I have written this function:

  $(document).ready(function() {      
      setInterval(getNotifys, 10000);      
      function getNotifys(){
            $.ajax ({                  
            method: "POST",
            url : 'get_notification.php',          
            success : function(data){
                console.log(data);            
                $('.notifications').html(data);                
            }
        });  
     }
 });

And here is get_notification.php;

<?php
include("global.php");
if($logged==0){
    header("location:".$baseurl."login.html");
    exit();
}
$data=mysqli_query($con,"select * from notifications where admin=1 and resolved=0") or die (mysqli_error());
$count = mysqli_num_rows($data);
?>
<span class="badge badge-danger" style="margin-bottom:25px"><?php echo $count; ?></span>

It works perfectly over most of the pages, but in some pages, it occurs that instead of displaying count to notification icon, it shows whole page HTML. Even when I console in success function, It consoles whole page HTML. I am so confused why is it happening. Any ideas?

As an aside - have you looked at [Server Sent Events & EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) ~ that offers an alternative to ajax polling — Professor Abronsius, Jul 30 '21 at 07:14
I would recommend you to return the count as JSON instead and have the span badge dom be modified after a successful fetch using jQuery. This would mean less overhead and avoiding the issue of fetching any HTML altogether. — Samik Sengupta, Jul 30 '21 at 08:05
You have an error. [`mysqli_error()`](https://www.php.net/manual/en/mysqli.error.php) needs one argument. Please consider switching error mode on instead. [How to get the error message in MySQLi?](https://stackoverflow.com/a/22662582/1839439) — Dharman, Jul 30 '21 at 11:45

score 0 · Answer 1 · answered Jul 30 '21 at 08:16

use json and create that span stuff in your javascript code.

    <?php
include("global.php");
if(!$logged) {
    http_response_code(401); // catch this error in ajax
    exit();
}

$data = mysqli_query($con,"select * from notifications where admin=1 and resolved=0");

if(!$data) {
    http_response_code(500); // catch this error in ajax
    exit(); 
}

$count = mysqli_num_rows($data);

echo json_encode(['count' => $count]);

JS:

      $(document).ready(function() {      
      setInterval(getNotifys, 10000);      
      function getNotifys(){
            $.ajax ({                  
            method: "POST",
            url : 'get_notification.php',          
            success : function(data){
                let data = JSON.parse(data);
                console.log(data);
                $('#notifications_count').html(data.count);                
            },
            error: function(jqXHR, textStatus, errorThrown) {
              console.log(textStatus, errorThrown);
            }
        });  
     }
 });

HTML:

<span class="badge badge-danger" style="margin-bottom:25px" id="notifications_count"></span>

Did not test this, but this shows you how you could do it.

Php ajax fetching same file html again and again

1 Answers1