Repetitive retrieval of HTML file using Php and Ajax

Question

Repetitive retrieval of HTML file using Php and Ajax

I've been tackling notifications in PHP lately. Within the header file, I've included 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);                
            }
        });  
     }
 });

Here's the content of 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>

While it functions flawlessly on most pages, there are instances where instead of displaying the notification count on the icon, it renders the entire HTML page. Even when checking the console within the success function, the whole page's HTML is logged. I'm quite puzzled as to why this is happening. Any insights?

php ajax

Answer 1

Answer №1

Implement JSON and generate the required span elements in your JavaScript code.

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

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

if(!$data) {
    http_response_code(500); // handle this error through 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 jsonData = JSON.parse(data);
                console.log(jsonData);
                $('#notifications_count').html(jsonData.count);                
            },
            error: function(jqXHR, textStatus, errorThrown) {
              console.log(textStatus, errorThrown);
            }
        });  
     }
 });

HTML:

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

This example demonstrates how you could implement it, although it has not been tested.

Answer 2

Implement JSON and generate the required span elements in your JavaScript code.

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

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

if(!$data) {
    http_response_code(500); // handle this error through 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 jsonData = JSON.parse(data);
                console.log(jsonData);
                $('#notifications_count').html(jsonData.count);                
            },
            error: function(jqXHR, textStatus, errorThrown) {
              console.log(textStatus, errorThrown);
            }
        });  
     }
 });

HTML:

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

This example demonstrates how you could implement it, although it has not been tested.

Repetitive retrieval of HTML file using Php and Ajax

Answer №1

Similar questions

Error message: Unknown modifier encountered during date validation

Unable to Validate Ajax Form if Enclosed within <form> Elements

Laravel is powerfully integrated with PHP's infinite script capabilities

I am encountering a problem with navigating through the CodeIgniter routing system

Having trouble with uploading an image in Laravel using a modal?

Executing a PHP function that invokes itself with an identical set of arguments

Is there a way to trigger elements to burst at random?

Invalid index when trying to add to an array

Issue with Ajax filtering on the frontend of October CMS (Uncaught TypeError: $form.request is not a function)

Utilize jQuery ajax to pull in data from an external website

"Unique AJAX feature for manual, customized one-time payment subscriptions for adding items to cart

Implementing Object Value Assignment to an Element Using jQuery

Sending a subdomain to a specific subfolder

Which is more efficient: Implementing caching on the frontend or on the

There seems to be an issue with the AJAX REST call failing to transmit data

Error in .ajax - 'a' is not defined. If 'a' exists, call it, otherwise, display an

Basic emailing list linked to database

Explore the wonders of Google Maps with the convenience of bpopup through ajax

Arranging data in CodeIgniter Pagination

Obtain PHP array after making an AJAX request