Simple notifications with PHP & JQuery
Sunday 15th March 2009 at 11:56 pm

One of the projects we're working on at the moment requires the user be given 'notifications' of events happening, for example data being saved or a record being deleted.

This article offers a very quick and simple way of doing this with a PHP/Jquery solution that is not only reliable but looks good too.

The PHP

The status updates originate from processes executed in PHP, for example - deleting a record. Below is our simple function for adding notifications:

function notify($message) {
   $_SESSION['notify'][]=$message;
}

The message we want to display to the user is stored in the session variable $_SESSION['notify'] ready to be retrieved later. Next we need a function to display the message to the user.

function display_notifications() {
   global $notifications;

   if(isset($_SESSION['notify'])) {
      $headers=headers_list();

      foreach($headers as $header) {
         if(substr($header,0,9) == 'Location:') {
            // Do not display since the user will be redirected
            return;
         }
      }

      foreach($_SESSION['notify'] as $notification) {
         $notifications.='<div class="notification">'.htmlspecialchars($notification).'</div>';
      }
      unset($_SESSION['notify']);
   }
}

I am going to store my notifications in a global variable $notifications which will be echoed out later when the page is displayed. The function first retrieves the headers sent already, then loops through those headers to check that a redirection has not been specified. If it has, the script returns false and the $_SESSION['notifications'] remains intact, if not the notifications are placed into the $notifications variable ready for display. We the destroy the $_SESSION['notifications] variable so that the same notifications do not get displayed again once the page reloads.

I can specify CSS styles for elements with the class 'notification' to customise how my notification looks. I'm going to take this a little further and use the JQuery Javascript Library to show and then hide the notifications to the user. You will notice that if the client's browser does not have Javascript enabled, this solution gracefully falls back to just displaying our styled errors permanently.

The Javascript

$(document).ready(function() {
   $('.notification').hide().slideDown(300, function() {
         $(this).animate({ opacity: "1.0" },3000, function() {
            $(this).slideUp(150);
      });
   });
});

Breaking down what's going on here - we first select all elements with the 'notification' class. We then immediately hide those elements then use the built in slideDown method that comes with JQuery to display the element, specifying this should take 300ms. Once that is complete, the callback function tells the element to 'animate' to 100% opacity over a period of 3 seconds. The element is infact already at 100% opacity, but we use this little trick to trigger a delay whilst the notification is displayed. Finally, we tell the element to slideUp again, this time in 150ms.

This very simple code snippet is a great way of offering the user a little feedback while they use your web application, enhancing their overall user experience. The concept could also be extended to offer different types of notifications - failure, warning or success notifications for example, each with different themes and styles through the cascading nature of CSS. Give it a go, or let us know any little tricks you use to give a bit more back the user.