Как я могу показать скрытый DIV, если ответ AJAX JSON показывает правильные данные?

Question

Я работаю над сценарием уведомления AJAX / jquery.
В настоящее время в ответе AJAX каждые 10 секунд он возвращает всю страницу в формате fhtml.
Страница, которую он возвращает, является страницей PHP, которая показывает только элементы, которые должны быть показаны (отображаются только элементы, которые имеют что-то НОВОЕ, например, новое почтовое сообщение или новый комментарий и т. д.)

Я хочу изменить это на использование JSON, хотя на моей главной странице (родительской) у меня будут DIV для каждого элемента уведомления, и по умолчанию они будут скрыты с помощью CSS. и в ответе JSON будет указано, какие элементы мне следует скрыть.

Итак, это мой основной план, а ниже приведен некоторый макет кода для визуального.

ответ JSON, из примерно 10 возможных элементов он будет возвращать только элементы, отмеченные 1 (что означает «да», чтобы показать этот элемент)
1 может даже не потребоваться, поскольку я показываю только те элементы, которые уже подтверждены для отображения с помощью PHP?

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

На главной родительской странице будут DIV с CSS, чтобы сделать их скрытыми вот так. (всего 4 элемента для демонстрации)

<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>

Так может кто-нибудь показать мне, как я это сделаю?

---

Вот мой CUREENT-код для отображения ajax-уведомления, используя метод OLD, он пока не использует JSON

<!-- 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

Измените свое уведомление об обновлении, чтобы использовать get вместо load, и чтобы обратный вызов повторялся по ключам JSON, показывая те DIV, для которых значение, соответствующее ключу, равно 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();
                       }
                   }
               });
     };