Facebook like notification without page refresh using Ajax in PHP

What would be the ideal mechanism  to get notifications like in Facebook in to a dashboard . I am thinking the best way is to do a Ajax call to a php page every 1 seconds and retrieve the notifications. In this tutorial I will explain you Facebook like notification without page refresh using Ajax in PHP. First create a table name messageTest in you database.

CREATE TABLE IF NOT EXISTS `messageTest` (
 `id` int(50) NOT NULL AUTO_INCREMENT,
 `notification` varchar(255) NOT NULL,
 `status` varchar(50) NOT NULL,
 PRIMARY KEY (`id`)
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

 

Now create a folder name notification and create a file name index.php inside the folder. We will create a notification Icon in this file and do some code within javascript to show the notification without page refresh. Whenever the data will be inserted in the database you will get the notification without page refresh. Copy and paste the below code in the index.php file.

<style>
#notification_count
{
padding: 0px 3px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: absolute;
margin-top: -1px;
font-size: 10px;
}
</style>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
 
function addmsg(type, msg){
 
$('#notification_count').html(msg);
 
}
 
function waitForMsg(){
 
$.ajax({
type: "GET",
url: "select.php",
 
async: true,
cache: false,
timeout:50000,
 
success: function(data){
addmsg("new", data);
setTimeout(
waitForMsg,
1000
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
addmsg("error", textStatus + " (" + errorThrown + ")");
setTimeout(
waitForMsg,
15000);
}
});
};
 
$(document).ready(function(){
 
waitForMsg();
 
});
 
</script>
<span id="notification_count"></span>
<a href="#" id="notificationLink" onclick = "return getNotification()">Notifications</a>
<div id="HTMLnoti" style="textalign:center"></div>

Now create a file name select.php and paste the below code. In the below code we will select the data from the database using where condition. We will show only those notification where status of the message will be unread.

Paste the below code in the file.

<?php
       $servername = "localhost";
       $username = "root";
       $password = "";
       $dbname = "mydatabaseName";
 
       // Create connection
 
       $conn = new mysqli($servername, $username, $password, $dbname);
 
       // Check connection
 
       if ($conn->connect_error) {
 
           die("Connection failed: " . $conn->connect_error);
 
       } 
 
       $sql = "SELECT * from messageTest where status = 'unread'";
       $result = $conn->query($sql);
       $row = $result->fetch_assoc();
       $count = $result->num_rows;
       echo $count;
       $conn->close();
?>

 

Now run the URL in your web-browser http://localhost/notification/. Your browser look like this.

facebook like notification

Because there is not data is your table so the notification icon will show zero notification. You can hide zero later on using where condition.

Now do not refresh the page and add  some data in your table in the backend.

INSERT INTO `messageTest` (`id`, `notification`, `status`) VALUES
 (1, 'New notification', 'unread');

facebook like notification
Here we have added the data where status is unread. Now go back to the your web browser and you will see notification one like below.

facebook like notification

 

That’s it.  Every time when you will insert the data in the table where the status is unread. You will get notification. like if you have three row with status unread and two row with status read you will see three in the notification icon.

Hope You enjoyed this article facebook like notification without page refresh using Ajax in PHP. Feel free to ask any question

  • freddy

    where is demo bro ? thanks

  • rakib

    where is your demo. if possible plz share

  • Sai Wera Hrun

    How to refresh this notification in javascript?
    Please, answer. Thanks.

  • Monkey D Luffy

    Hi! How can I remove the notification_count id after clicking the notification link? that’s my only problem please help. :) Anyways this was so nice tutorial :)

    • Adriano Leal

      HI! Did you find the solution to the problem? Thanks.

  • Jabes De Chavez

    how to play sound when new notification comes in. Help please.

  • Jabes De Chavez

    Help me please, this is for my thesis,. asap

  • Yusto

    works fine…. Great tutorial

  • Adriano Leal

    Hi! Very Good. How can I remove the notification_count id after clicking the notification link?