Question

I am working on a AJAX/jquery notification script.
Currently it retunrs a whole fhtml formatted page every 10 seconds in the AJAX response.
The page it is returning is a PHP page which only shows items that should be shown
(only items that have something NEW show up, like a new mail message or a new comment etc..)

I am wanting to change this to use JSON instead though so on my main page (parent) I will have DIV’s for each notification item and by default they will be hidden using CSS
and the JSON response will tell which items I should un-hide.

So that is my basic plan and below is some mockup code for visual.

the JSON response, out of like 10 possible items, it will only return the items marked with a 1 (meaning yes to show that item)
The 1 might not even be required since I am only showing items which are already confirmed to be showed with PHP?

{"mail":"1", "friend_request":"1" , "comment":"1" , "photo_comment":"1"},

On the main parent page there will be DIV’s with CSS to make them hidden like this. (only 4 items for the demo)

<style type="text/css">
#mail_notification{
    display: none;
}
#friend_request_notification{
    display: none;
}
#comment_notification{
    display: none;
}
#photo_comment_notification{
    display: none;
}
</style>

<div id="mail_notification"><a href="someurl.com/mail.php?id2424">New Mail</a></div>
<div id="friend_request_notification"><a href="someurl.com/mail.php?id2424">New Friend Request</a></div>
<div id="comment_notification"><a href="someurl.com/mail.php?id2424">New Profile COmments</a></div>
<div id="photo_comment_notification"><a href="someurl.com/mail.php?id2424">New Photo Comments</a></div>

So can someone show me how I would do this?

---

Here is my CUREENT code for showing the ajax notification, using the OLD method, it does not use JSON yet

<!-- Auto update/look for NEW notifications -->
<script type='text/javascript'> 
$(document).ready(function(){ 
     var updatenotification = function(){ 
          $('#notificationcontainer') 
               .load('/modules/member/home/notifications.inc.php') 
               .fadeIn("slow"); 
     }; 
     var auto_refresh = setInterval(function(){updatenotification();}, 5000); 
     updatenotification(); 
}); 
</script>
<!-- ENDS HERE -->

Answer 1

Change your update notification message to use get instead of load and have the callback iterate through the JSON keys, showing those DIVs for which the value corresponding to the key is a 1.

var updatenotification = function() {
  $('#notificationcontainer')
    .get('/modules/member/home/notifications.inc.php', null, function(data) {
      for (key in data) {
        if (data[key]) {
          $('#' + key + '_notification').fadeIn();
        }
      }
    });
};