Facebook Style Header Notification using PHP Ajax

55

In Facebook like social networking websites, we can see notification alert in the page header. In this tutorial, we are going to add such header notification to notify the user about latest data. This will be helpful to keep the user updated by notifying what is new.

In this example, we have a notification icon in the page header. We show the notification count to represent how many new items are there as unread. On clicking the notification icon, we list the latest items.

Posting New Data to Notify

This code shows an HTML form to post a new message to be notified to the user. After submitting this new message it will be stored in a database with the ‘read’ status 0. The messages with the read status 0 are unread messages. The sum of the unread messages is calculated and displayed near to the notification icon in the header.

Show Notification Data using jQuery

We call a jQuery script on the click event of the notification icon. In this jQuery script, we call PHP via AJAX to get latest messages from the database.

On clicking notification icon, it removes the notification count from header and list all the latest data. The script is,

 

Leave A Reply

Your email address will not be published.